css - 在固定宽度的 DIV 容器内安装带有边框的 IMG

Question

我有一个固定宽度的 DIV 元素。在其中，我有第二个 DIV，它只包含一个 IMG 元素。我想给图像添加一个边框，而不是让它扩展到包含 DIV 标签的边界之外。

尝试 #1:
如果我尝试直接向 IMG 添加边框，它会超出固定宽度。
(参见 image-container1)

尝试 #2:
如果我尝试在内部 DIV 上 box-sizing: border-box;，它会切断图像的右侧，并在图像的底部显示一个小缝隙图像(在边框和图像之间)。
(参见 image-container2)

JSFIDDLE: http://jsfiddle.net/B2zQA/

HTML:

<div id="container">
    <!-- <br /> tags are used to show the container's width (green space) -->
    <br />
    <div id="image-container1"> <!-- Attempt #1 -->
        <img class="my-image1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Pardalotus_punctatus_female_with_nesting_material_-_Risdon_Brook.jpg/600px-Pardalotus_punctatus_female_with_nesting_material_-_Risdon_Brook.jpg" width="600" height="480" />
    </div>
    <br />    
    <div id="image-container2"> <!-- Attempt #2 -->
        <img class="my-image2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Pardalotus_punctatus_female_with_nesting_material_-_Risdon_Brook.jpg/600px-Pardalotus_punctatus_female_with_nesting_material_-_Risdon_Brook.jpg" width="600" height="480" />
    </div>
    <br />
</div>

CSS:

#container {
    background-color: green;
    padding: 10px 0;
    width: 500px;
}

#image-container1 {
    display: block;
    width: 600px;
    max-width: 100%;
}

#image-container1 img.my-image1 {
    border: red solid 30px;
    -moz-box-shadow: 0px 0px 10px 1px red;
    -webkit-box-shadow: 0px 0px 10px 1px red;
    box-shadow: 0px 0px 10px 1px red;
    width: 600px;
    max-width: 100%;
}

#image-container2 {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: red solid 30px;
    -moz-box-shadow: 0px 0px 10px 1px red;
    -webkit-box-shadow: 0px 0px 10px 1px red;
    box-shadow: 0px 0px 10px 1px red;
    display: block;
    width: 600px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

#image-container2 img.my-image2 {
    width: 600px;
    max-width: 100%;
}

如何为图像添加边框而不使其超出固定宽度容器的边缘？而且它也不应该有图像的右边缘被截断，或者在边界和图像之间有奇怪的间隙。

Answer 1

您可以为标记中的第二张图片尝试以下 CSS:

#image-container2 {
    padding: 30px;
    background: red;
    -moz-box-shadow: 0px 0px 10px 1px red;
    -webkit-box-shadow: 0px 0px 10px 1px red;
    box-shadow: 0px 0px 10px 1px red;
}

#image-container2 img.my-image2 {
    width: 100%;
    display: block;
}