css - 流体设计问题

Question

请检查这个例子：http: //jsfiddle.net/fFSZN/2/

您会看到由于边界的原因，一部分是如何img脱离的。div(300px)的当前宽度div只是为示例设置的，实际上它是 100%（所以我不能硬编码值）。div我的问题是如何仅使用 CSS将图像及其边框适合？

score 2 · Accepted Answer

您需要使用box-sizing: border-box它来完成这项工作。另外，请注意我如何将图像设置为最大为包含元素宽度的 100%，同时将高度设置为自动以保持适当的纵横比。

来自 Paul Irish 的有关边界框的更多信息：http: //www.paulirish.com/2012/box-sizing-border-box-ftw/

score 1 · Accepted Answer

首先，让它成为一个流动的图像，给它max-width: 100%。

然后，给包含 div 的 5px 填充和黑色背景，而不是图像上的 5px 边框。

div {
    width:300px;
    border:1px solid red;
    padding:5px;
    background: #000;
}
img {
    max-width:100%;
    display:block;
}

score 0 · Accepted Answer

删除图像周围的黑色边框。左侧的边框增加了额外的空间，因此它超出了 div 的边界。

img { width:100%; display:block; }

这是更新的 jsfiddle：http: //jsfiddle.net/fFSZN/4/

3 回答 3