search

theNewDynamic / gohugo-theme-ananke

Ananke: A theme for Hugo Sites
https://gohugo-ananke-theme-demo.netlify.com/
MIT License
1.1k stars 1.13k forks source link

Aspect ratio messed up for images in page that specify width/height #566

Closed jhenstridge closed 1 year ago

jhenstridge commented 1 year ago

If I use Hugo's builtin {{< figure >}} shortcode to embed an image in a page and specify it's width and height (as is often recommended to avoid re-layout after the image is loaded), the theme's CSS messes up the image aspect ratio.

For example, including the following in the page:

{{< figure src="heathrow-checkin.jpg" width="640" height="480"
        caption="Passengers queuing for checkin" >}}

{{< figure src="heathrow-checkin.jpg"
        caption="Passengers queuing for checkin" >}}

Results in:

image

The theme's CSS applies max-width: 100% to to limit the width of the images, but this only adjusts the height when it hasn't been set via the HTML attribute.

RoninTech commented 1 year ago

I posted about this in #341 and received the info on how to change the width. Check that closed issue out