流体设计问题

Question

请查看此示例：http://jsfiddle.net/fFSZN/2/

由于边界，您会看到img的一部分如何离开div。 div（300px）的当前宽度仅为示例设置，实际上它将是100％（因此我无法硬编码值）。我的问题是如何仅使用CSS将图像及其边框装入div？

Answer 1

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

http://jsfiddle.net/fFSZN/6/

保罗爱尔兰边境框的更多信息：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

首先，要使其成为流畅的图像，请将其max-width: 100%。

然后，代替图像上的5px边框，给出包含div 5px填充和黑色背景。

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

Demo

Answer 3

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

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

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