Question

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

尝试＃1：
如果我尝试直接将边框添加到IMG，它会超出固定宽度（见image-container1）

尝试＃2：
如果我尝试在内box-sizing: border-box;上DIV，它会切断图像的右侧，并在图像的底部（边框和图像之间）显示一个小间隙。
（见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;
}

Answer 2

“尝试＃2”非常接近工作......

图片下方的间隙是通过直接向图片添加display: block;来解决的，正如@hmhcreative在评论和回答中所建议的那样
“截止图像的右边缘”是我的想象（图片看起来并不居中）但是我尝试了一个更大的边界，很明显图像没有被切断

以下是我最终解决方案的更新JSFIDDLE：http://jsfiddle.net/B2zQA/2/

使IMG具有固定宽度DIV容器内的边框

2 个答案: