将图像大小调整为div的100％高度并保持纵横比 [英] Resize image to 100% height of a div and keep aspect ratio

问题描述

这是一张快速草图。

我想实现图库div中的图像将是图库div高度的100％并保持纵横比

I would like to achieve that images in the gallery div will be 100% of the height of the gallery div and keep the aspect ratio

AND

图像会调整大小，因为您将更改浏览器的大小。

that images would resize as you would change the size of browser.

这可能吗？

非常感谢任何帮助。

这是我到目前为止所做的：www.nulaena.si / photob /.

Here is what I made so far: www.nulaena.si/photob/.

推荐答案

这样的事情？

        body {
            padding:0;margin:0;
        }
        #header {
            position: absolute;
            background: orange;
            top:0;
            left:0;
            width: 100%;
            height: 100px;
        }
        #footer {
            position: absolute;
            background: orange;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
        }
        #middle {
            position: absolute;
            top: 100px;
            bottom: 100px;
            left: 0;
            width: 100%;
        }
        img {
            height:100%;
            width: auto;
        }

<div id="header">header</div>
<div id="middle">
    <img src="images/myImage.jpg" />
</div>
<div id="footer">footer</div>

这篇关于将图像大小调整为div的100％高度并保持纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！