I am facing a challenge with a fixed width DIV element. Inside this element, there is a second DIV containing only an IMG element. My goal is to add a border to the image without exceeding the boundaries of either of the enclosing DIV tags.
Solution #1:
When attempting to directly apply a border to the IMG, it extends beyond the fixed width.
(see image-container1)
Solution #2:
Using box-sizing: border-box; on the inner DIV results in cutting off the right side of the image and displaying a slight gap at the bottom (between the border and image).
(see image-container2)
JSFIDDLE: http://jsfiddle.net/B2zQA/
HTML:
<div id="container">
<br />
<div id="image-container1"> <!-- Solution #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"> <!-- Solution #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%;
}
Is there a way I can achieve adding a border to the image within the fixed-width container without any expansion issues or gaps between the border and the image?