0

我有一个包含四个 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;
   }
4

2 回答 2

0

我不确定我是否理解您的问题...如果您使用

.magic {
    max-width:100%;
    max-height:100%;
}

有大图有什么问题？

你想让他们填满整个 div 并尊重他们的大小比例吗？

于 2013-03-25T17:41:49.713 回答
0

我建议将这些图像作为背景图像属性添加到块级 div，例如：

<div class="container">
    <div class="magic" style="background-image: url(SOURCEHERE.JPG)"></div>
</div>

使用额外的 CSS，例如：

.container{
    width: 100px; /* or some other width */
    height: 100px; /* or some other height */
    padding:20px; /* this will add a little margin around your image */
    box-sizing:border-box; /* padding will be calculated with the container dimensions */
}

.magic{
    width:100%;
    height:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    box-sizing:border-box;
}

jsfiddle：http: //jsfiddle.net/PDL2U/

于 2013-03-25T18:08:24.093 回答