Image Height Truncation as Browser Window Size Increased.

[stevegill]

I have noticed that if I add an image to a web page and set it to Full Width and Scale Stretched Object under Web Sticky/Stretchy, when viewed in a browser the top and bottom of the image are truncated when the browser window size is increased. The width is resized correctly. Is there a way to have both the width and the height resize?

The same behaviour happens with the Hipster template.

Thanks,

Steve

[siran]

You can use some little CSS but that will only work in IE9 and later.
Create your stretching image as usual.
Add a name to it to define a class name: htmlclass=your_class_name
Add some code to the page head (or body if you like)

<style>
.your_class_name { height: calc(100vw / 500 * 295) !important; }
</style>

Replace your_class_name with the class name you chose when giving the htmlclass= name.
Don't forget to place the dot before the class name.
Replace the 500 * 295 with the size of your image.


See example file.

You can reuse the name for other stretching images that have the same aspect ratio.

[stevegill]

You can use some little CSS but that will only work in IE9 and later.
Create your stretching image as usual.
Add a name to it to define a class name: htmlclass=your_class_name
Add some code to the page head (or body if you like)

<style>
.your_class_name { height: calc(100vw / 500 * 295) !important; }
</style>

Replace your_class_name with the class name you chose when giving the htmlclass= name.
Don't forget to place the dot before the class name.
Replace the 500 * 295 with the size of your image.


See example file.

You can reuse the name for other stretching images that have the same aspect ratio.

Excellent, thanks Siran.