Stretch image proportionally to fit width of container

LondonLight.org

I would like my images to stretch to 100% of their container div, and that container div is set to width: 90%. I wanted to do this with CSS (I avoid javascript when I can) but I see that printDefaultSizedImage includes `width="900" height="562"` and I don't see a way of turning it off.

As a side-note, I upload images 1920px wide or larger, so in most cases "stretch" will mean downscaling them to 90% of the user's viewport, so they should still be sharp.

What is the recommended way of stretching images proportionally to fit the width of the container div?

acrylian

You can set the size of the image on the image options. Set the 1920px as the value. By default ZP will not upscale images anyway (unless you tell it to do). Or just use the fullimage function as on the other topic to use it directly.

Also make images fit the containter proportionally use the standard way to make images responsive.
`
yourimageIDorClass {
max-width: 100%;
height: auto;
}
`
This will make it alsways fit without exceeding its original size and without squishing.
Be sure your server can handle such FullHD images otherwise you may get time outs and memory issues.

LondonLight.org

Thank you for replying, but that's not what I meant.
I want to serve the user an image 1920px wide (in the future I might write a small script to detect the user's current viewport size and then use `printCustomSizedImage` to use that size, to save bandwidth, but that's not a task for now), and to have the web browser scale it (usually down) to fit the user's viewport. This can be done by setting `width:100%; height:100%;`. Zenphoto sets `width="900" height="562"` on the <img> and I see no way of turning that off. It's best if there is no height set at all (not on img, and not in CSS) because then it works across more browsers (with height set on <img> I have to set height:100% in CSS, and that I hear is a problem for some IE versions). So
1- Can I prevent Zenphoto from setting width= and height= in <img>?
2- Does Zenphoto have some built-in functionality to fit the image to the container's size when that size is unknown to me (i.e. 90%)?

acrylian

`width:100%; height:100%;` works as well but will upscale which is why you use the css I posted. If your images are too large anyway that is probably not important.

You can override the attribute settings using the CSS keyword `!important` actually.

Also you can use the `get` function instead to get the plain image url. Nearly every function has that. Please see the functions documentation. Also there is the object model framework for more sophisticated stuff.

I don't understand the 2nd question I think. Zenphoto will resize the image as you tell it via options or on the theme directly. Note that the theming tutorial is of course for the basics.

As for the bandwidth you might be interested in this: https://github.com/acrylian/zp_picturefill

acrylian

It's best if there is no height set at all

ACtually it is best if both are set because browser then know how to calculate the space better. But that probably is not that important nowadays and useless with responsive layouts basically.

LondonLight.org

Excellent! Thank you very much!