I'm trying to figure out how to make a border fit exactly around a group of images. As you can see in this Jsfiddle I posted, the border fits around the top and left corner, but it doesn't fit exactly around the bottom and right corners. Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>Gallery Test</title>
<link type="text/css" rel="stylesheet" href="CSS.css"/>
</head>
<div class="album">
<span><img class="img1" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg">
</span>
<span><img class="img2" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg">
</span>
<span><img class="img3" id="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg">
</span>
</div>
</html>
And Here is my CSS:
.img1{
border-width:4px;
border-style:solid;
}
.img2 {
position:relative;
right: 90px;
top:5px;
z-index:-1;
border-width:4px;
border-style:solid;
}
.img3{
position:relative;
right:180px;
top:10px;
z-index:-2;
border-width:4px;
border-style:solid;
}
.album {
border-width:2px;
border-style:solid;
border-color:#78c9a9;
display:inline-block;
}
#imgAlbum {
height:150px;
width:100px;
}
p {
color:red;
}
Thanks in advance!
There are some errors in your CSS/HTML. I corrected them and floated the images so that the border raps them exactly. I also removed the <span>
tag which was not used.
HTML :
<div id="album">
<img id="img1" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg" />
<img id="img2" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg" />
<img id="img3" class="imgAlbum" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red- fox_679_600x450.jpg" />
</div>
CSS :
#img2 {
z-index:-1;
margin: 5px 0 0 -90px;
}
#img3{
z-index:-2;
margin: 10px 0 0 -80px;
}
#album {
border-width:2px;
border-style:solid;
border-color:#78c9a9;
display:inline-block;
}
.imgAlbum {
position:relative;
height:150px;
width:100px;
border:4px solid #000;
display:block;
float:left;
}
p {
color:red;
}
instead of using border-width use width and height of the album class which wraps your images.
.album {
width:300px;
height:200px;
display:inline-block;
border : 2px #78c9a9 solid;
}
If you use negative margin
insread relative
positionning, the area used by img is reduced. When you use relative + coordonate, space used by img remains the same, you only see it at another position. DEMO
Some Infos on W3C WIKI
for img(inline-boxe) you may use vertical-align
instead vertical coordonates : DEMO
Position:relative
remains usefull for triggering z-index properies.
.img1{
border-width:4px;
border-style:solid;
}
.img2 {
position:relative;
margin-left: -90px;
vertical-align:-5px;
z-index:-1;
border-width:4px;
border-style:solid;
}
.img3{
position:relative;
margin-left: -90px;
vertical-align:-10px;
z-index:-2;
border-width:4px;
border-style:solid;
}
.album {
border-width:2px;
border-style:solid;
border-color:#78c9a9;
display:inline-block;
}
#imgAlbum {
height:150px;
width:100px;
}
p {
color:red;
}
JSFiddle example using margins
HTML:
<div class="album">
<div class="imgAlbum"><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-fox_679_600x450.jpg" /></div>
<div class="imgAlbum"><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-fox_679_600x450.jpg" /></div>
<div class="imgAlbum"><img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/006/cache/red-fox_679_600x450.jpg" /></div>
</div>
CSS:
* {
box-sizing: border-box /* so that borders don't affect our box measurements */
}
.album {
border: 2px solid #78c9a9;
display: inline-block;
}
.imgAlbum {
display: inline-block;
height: 7rem; /* common size */
width: 10rem; /* for all images */
position: relative; /* for z-index mostly */
margin-left: -9rem; /* offset for each child */
vertical-align: top;
}
.imgAlbum:nth-of-type(1) { /* first image shoud not be offset */
margin-left: 0;
}
.imgAlbum:nth-of-type(2) {
margin-top: 1rem;
z-index: -1;
}
.imgAlbum:nth-of-type(3) {
margin-top: 2rem;
z-index: -2;
}
.imgAlbum img {
width: 100%; height: 100%; /* scale images to .imgAlbum size */
border: 3px solid black;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.