0

我一直在为我认为应该非常简单但无法弄清楚的事情找到几乎解决方案。（注意——我现在正处于学习 CSS 的初级阶段）

我有一张图片要放在页面上。水平/垂直居中。在一个div占窗口高度和宽度 80% 的容器中。我希望图像div根据最小的那个来拉伸以填充它的高度或宽度。

我敢肯定这对大多数人来说很简单，但同样，我只是在学习。这方面的任何方向都会很棒。

我创建了一个插图，以防我解释得不够好： 在此处输入图像描述

4

1 回答 1

1

试试这个http://jsfiddle.net/David_Knowles/ddh2k/

这可以满足您的大部分需求。如果您真的只希望在屏幕高度减小到小于图像固有高度时图像是可用高度的 80%，则需要添加一些额外的 javascript。

<body>
<div id="container">
        <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="apropriate alt text">
</div>
</body>

html,
body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    background-color: #eee;
}
#container{
    margin: auto;
    width:100%;
    height:100%;
    text-align:center;
    font-size:0;
    white-space:nowrap;
    background:#aae;
}
#container:before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
img {
    width:80%;
    height:auto;
    display:inline-block;
    vertical-align:middle;
    background:#fff;
}
于 2013-05-12T19:11:43.123 回答