2

我有一个固定宽度的DIV元素。在它里面，我有第二个，它只DIV包含一个IMG元素。我想给图像添加一个边框，而不是让它超出任何一个包含DIV标签的边框。

尝试#1：
如果我尝试直接添加边框IMG，它会扩展超过固定宽度。
（见image-container1）

尝试#2：
如果我尝试box-sizing: border-box;在 inner 上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%;
}

如何在不超出固定宽度容器边缘的情况下为图像添加边框？它也不应该有图像的右边缘被切断，或者在边框和图像之间有一个奇怪的间隙。

4

2 回答 2

2

您可以为标记中的第二个图像尝试以下 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;
}
于 2013-06-25T20:17:10.967 回答
1

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

  • display: block;正如@hmhcreative 在他的评论和回答中所建议的那样，通过直接添加到图像来解决图像下方的差距
  • “图像截断的右边缘”是我的想象（图片看起来没有居中），但我尝试使用更大的边框，很明显图像没有被截断

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

于 2013-06-25T22:31:03.767 回答