Image distortion in smaller windows

[jscarlton]

Hello,
In smaller browser windows (e.g., iPhones), images would shrink in width but maintain a minimum height, causing distortion. I've found a relatively easy css update to fix it, though I’m not sure if there’s a better way or not. My fix can be added to the poole-overrides.css file:

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 1rem;
  border-radius: 5px;
}

Thanks!

[zyro]

I haven't seen this before. How are you inserting images into your posts?

[jscarlton]

That's interesting...I did some digging and here's what I found.

The problem was only happening on posts I'd imported from Wordpress using the Wordpress-to-Hugo exporter. Those images were inserted something like the graph in the following:

<img src = "http://www.foo.com/wp-content/uploads/YYYY/MM/imageName-1024x744.jpg" alt="altText" width="640" height="465" class="alignnone size-large wp-image-294>

And they would get distorted in small windows like this:

Add the fix I mentioned, and everything was undistorted:

However, when I write new posts, I don't typically specify an image width/height, and everything grows and shrinks appropriately regardless of whether or not I've set height: auto.

So I did some experimenting and believe that it's the act of specifying the height using "height =" that causes the problem. And that's the limit of my knowledge about this kind of stuff.

So I'm keeping the fix in my fork of the theme because I can't have all of my old images distorted. Hopefully these details will help you decide whether to incorporate the fix into the main branch.

-Stuart

[zyro]

Yeah, that'll be the extra properties on the img tag. Wherever possible you should use Hugo's figure shortcode and avoid specifying a fixed height/width on each image.

Maybe it's worth going through your exported posts and removing the fixed size attributes?

[jscarlton]

Thanks!

I don't typically specify fixed dimensions, but wordpress took the liberty for me. I have too many old posts and not enough regex knowledge to change my past posts, but at least I figured out what's going on and am confident that it won't happen in the future.

[zyro]

Awesome, glad it's sorted.