我有一个包含四个 div 容器的画廊网格。我想将任何图像包含在 div 中,请记住每个 div 框都有不同的高度和宽度。应该在 div 中居中,在四周留下合理的填充。请检查链接以更好地理解 JsFiddle http://d.alistapart.com/fluid-images/3-4.png
非常感谢任何帮助。在此处输入代码
<div id="body">
<div class="container">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h3">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container w2">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
.container {
height:100px;
width: 100px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
float: left;
background: #CCC;
border-radius: 5px;
cursor: pointer;
box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
}
.magic {
max-width:90%;
height:70%;
}
.h2 {
height: 210px;
width: 220px;
}
#body {
margin: 10px;
}
.h3 {
width: 340px;
height: 210px;
}
.w2 {
width: 220px;
}