Image resizing problem (max-height)

[davidspry]

I’m currently working on my website and I’m having some trouble with image resizing.

Images have a max-height of 60vh. If you open the website and adjust the height of the browser, you should see that working properly. However, it only works until the viewport width shrinks to roughly 500-600px. Beyond that point, the image becomes distorted rather than resizing automatically.

I can’t work out what’s overriding the automatic resizing function. Any help would be appreciated!

[AsGYakimov]

On line 245 of your css you have this:

@media (min-width: 780px)
.content img {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

I think this is what breaks your design.

[davidspry]

Thanks for your suggestion. Sadly, removing that code doesn’t fix the problem. That just keeps the image horizontally centred at viewport widths above 780px.

[AsGYakimov]

If you remove it from the media query and put it as ‘normal’ style, it should work..

[davidspry]

That doesn’t work either. Moreover, I removed all of the media queries last night and the problem remained.

If it helps, there’s another gallery on the ‘Pictures’ page. Strangely, only the landscape oriented pictures are affected on that page. The portrait-oriented pictures scale correctly (picture 13/15, for instance) on that page, but not on the front page. Confusing!

[bearhead]

The problem is caused by width and height declarations being added to your images when the browser window goes below 780px. I assume this is because of some javascript on your website, but I haven’t been able to find the offending line.

A very dirty solution would be to add !important to
width: auto; for your img selector (line 173).

[davidspry]

Thanks, bearhead! That works.

I suspect I’ll have to stick with this solution because the image scaling that’s causing the distortion is apparently built-in to the website builder I’m using.

[Author]

Posts