Question

Here is a quick sketch.

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

和

图像会随着您更改浏览器的大小而调整大小。

这可能吗？

非常感谢任何帮助。

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

Answer 1

这样的东西？

        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>

Answer 2

使用#yourgallerydiv img { height: 100%; }（虽然width更可取 - 我还没有针对您的图库div中的图片代码测试height），并将图片大小调整到足以填充大图片屏幕深度，因此放大时不会像素化。当父元素放大时（如果也给出百分比），以百分比大小的图像会放大。

将图像大小调整为div的100％高度并保持纵横比

2 个答案: