0

I have a banner image on my page and I wish to fill the page width. What's the correct way to do this in Wagtail?

I have

{% image page.banner_image fill-1110x300 as img %}

and that looks good on a PC, but it is far too wide on a a phone

How can make the image resize to fit the device?

Psionman
  • 3,084
  • 1
  • 32
  • 65
  • 2
    Use any of the CSS-based solutions at https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container - having Wagtail in the mix doesn't really change anything here. – gasman May 10 '20 at 09:48

1 Answers1

3

The link in @gasman's comment provided the basis of my solution.

xxx.html

    {% image page.banner_image scale-100 as img %}
    <img src="{{ img.url }}" alt="{{ img.alt }}" class="responsive">

xxx.css

.responsive {
  width: 100%;
  height: auto;
}

This displays an image that fills the browser horizontally and adjusts its height proportionally

Psionman
  • 3,084
  • 1
  • 32
  • 65