I'm making a slideshow of images with the class "Display". I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:
.Display {
max-width: 80%;
max-height: 80%;
}
It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.
Thanks very much for any help.
have you tried using only height: 80%?
Using just height: 80% will fix it at that permanently, stretching smaller images.
I've just tried using max-height and it doesn't seem to work in either FireFox or IE. The only solution I could find that wouldn't stretch smaller images is wrapping the <img> in a <div> and setting height to 100% in that;
<div style="height:100%;">
<img class="Display" src="source/image/path/file.jpg" />
</div>Obviously, you could put a class in the stylesheet instead of declaring it in the <div> tag.
I think the reason for this is because the height of a page isn't set to the height of the display area in the window by default, like the width is. By setting the height in a <div> to 100%, you're setting the height of that element to 100% of the display area in the window.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.