How to disable resizing of elements

[llll]

Hello,

I am looking for a way to display images, GIFs and videos pixel-exact in original size and so that the image is cropped when the screen is smaller than the width of the image.

Adding a html class to the image, like you kindly suggested earlier in the example below, prevents resizing to more than 600 px. But the 600 px image will still resize to a smaller width.

.col.fixed-width{
width: 600px!important;
}

Could you please let me know how to disable resizing in both directions?

I will only ever need widths of 512 px, 1024 px, ...

Thank you very much

[mariusjopen]

Hi @llll
a bit difficult to help when I do not see a website to check the code.

But try to address the image directly:

.col.fixed-width img{
width: 600px !important;
}

I hope that helps!

Best!

Marius

[llll]

Hi Marius,

thanks.
I might well have screwed up somewhere, so please have a look.
Here is an example for testing:

https://lidiasigle.de/fixed_width_test

600 px width images and applying this:

.col.fixed-width{
width: 600px!important;
}

I tested your suggestion and unfortunately it did not solve the issue: still downsizing the image in a narrow screen instead of cropping. Your suggestion behaves in the same way as Armin's suggestion above, but it additionally creates a white frame at the right and the bottom, which will grow bigger when increasing the screen size. Both suggestions cause issues like displaying parts of the first row below the second row and I had a double image displayed when there is only one row. There are issues with parallax and row gutters, too.

I need widths of 512 px and 1024 px. Can I do it like this?

.col.fixed-width{
width: 1024px!important;
}

And how can I use both 512 px and 1024 px? I could make a 1024 px file for 512 px with the other half filled with background color. There is probably a more elegant way?

Disabling resizing might be not a common requirement but is very important for me. Hope you know a way to achieve it.

Thank you very much for your help

[mariusjopen]

Hi @llll

ok, maybe my mistake. I got you wrong:

Try this:

.col img, .col .img {
    width: 60vw !important;
}

You can change the 60 to another number.
Now the image always resizes with the browser-width.

Best!

Marius

[llll]

Hi Marius,

thanks, but that’s the opposite. I do not want the image to resize with browser width. I want the image to never resize. I need a way to display the image always pixel-exact and never interpolated. Instead of downsizing, the image should be displayed cropped, when the browser width is less than 1024 pixels for a 1024 px wide image.
Armin’s suggestion works only in one direction – the image does not resize with increasing browser width, but the image width decreases when browser width is less than a certain width – and it also causes visual bugs like double images, overlaying of rows etc.

My questions are:

How to disable resizing of elements?
How to set more than one fixed width?

Please let me know if something is unclear.

Thank you very much in advance

[mariusjopen]

Hi @llll

you can add something like this to your CUSTOM HEAD section:

<style>

@media screen and (max-width: 1000px) {
    .resize img {
        width: 300px !important;
    }
}
		
@media screen and (max-width: 800px) {
    .resize img {
        width: 200px !important;
    }
}

@media screen and (max-width: 600px) {
    .resize img {
        width: 100px !important;
    }
}
</style>

I hope that helps!

Best!

Marius

[llll]

Hi Marius,

thanks but this is not what I asked for. I do not want the image to resize with browser width. I want the image to always be displayed at 100%. Here is an example:
http://pza.sanbi.org/sarcophyte-sanguinea-subsp-sanguinea