如何在一组照片周围做边框？
[英]How can I make a border wrap around a group of pictures?
问题描述
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. 正如您在我发布的Jsfiddle中所看到的那样，边框适合于顶部和左侧，而不能完全适合于底部和右侧。 Here is my html: 这是我的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: 这是我的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! 提前致谢！
4 个解决方案
解决方案1
1 已采纳 2014-05-29 17:40:30
There are some errors in your CSS/HTML. 您的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. 我还删除了未使用的<span>标记。
HTML : 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 : 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;
}
解决方案2
0 2014-05-29 17:40:07
instead of using border-width use width and height of the album class which wraps your images. 而不是使用border-width，而是使用包装图像的相册类的width和height。
.album {
width:300px;
height:200px;
display:inline-block;
border : 2px #78c9a9 solid;
}
解决方案3
0 2014-05-29 17:46:09
If you use negative margin insread relative positionning, the area used by img is reduced. 如果您使用负 margin读relative定位，则会减小img使用的区域。 When you use relative + coordonate, space used by img remains the same, you only see it at another position. 当使用relative + coordonate时，img使用的空间保持不变，您只能在其他位置看到它。 DEMO DEMO
Some Infos on W3C WIKI W3C WIKI的一些信息
for img(inline-boxe) you may use vertical-align instead vertical coordonates : DEMO 对于img（inline-boxe），您可以使用vertical-align而不是vertical coordonates： DEMO
Position:relative remains usefull for triggering z-index properies. Position:relative仍然可用于触发z-index属性。
.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;
}
解决方案4
0 2014-05-29 18:17:48
JSFiddle example using margins JSFiddle使用边距示例
HTML: 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: 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.