(CSS) Simplest solution for a title image stretch?

Report · Apr 03, 2017

So I'd like the top of my pages to feature an image that stretches to fill the width at all times, while maintaining a specific overall aspect ratio. For the sake of argument, let's say cinematic 16:9 (or 1.777777) -- so if the viewport is 800px wide, the image will be 450px high (and follow in real-time if that width changes) -- then, the rest of the flow of the page.

I really like using divs for everything, so I'd favor a div background solution over an img src one, but will default to whatever the best available solution is. I did try background-size: cover already -- which opened up some interesting new UX avenues -- but iOS seems to have serious issues with it; So I told myself that perhaps a more traditional "fit to width and retain proportions" approach might yield friendlier results. Of course, as a designer, I could be underestimating the complexity of what I'm describing.

Report · Apr 03, 2017

For more info on background images see background-size | CSS-Tricks

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 04, 2017

Simplest way.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

.img-responsive {

height: 100%;

width: 100%;

}

</style>

</head>

<body>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 04, 2017

shouldn't the height be 'auto' for that to work and retain the proportions?

To the OP: It's O/K wanting the image to retain the correct proportions, but have you thought about image quality, if it goes beyond the actual intrinsic size. the bigger it gets, the more the quality will drop?

You could look at using srcset -

https://responsiveimages.org/

Report · Apr 04, 2017

Did you try it?

Obviously, if the native image size is a postage stamp, a raster image is going to look terrible on wider screens. Whereas an SVG will not degrade when resized. But scalable vectors can't be used for photos. They work best on Illustrator shapes, icons, and text.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 04, 2017

yes.

If you use 100% for both, then the image will fill the container, and not retain the proportions unless the container is set to the proportions.

e.g.

If the image width is 800px but the container is 200px it will be 200px wide, but the height will be 100% of the images height if the container allows it and no container height is set.

Report · Apr 04, 2017

You would have to calculate the proportions of the width to height values, then use css calc() to allow the height value to be worked out to set the height of the image.

So if the image is 800px by 200px intrinsic values it is 4:1.

setting the width to a max-width of 100%, the css calc for the height would be -

calc(100%vw / 4)

giving

your div class/id img {

width: 100%;

height: -webkit-calc(100vw/4);

height: calc(100vw /4);

}

(CSS) Simplest solution for a title image stretch?

1 Correct answer