Question

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

Answer 1

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

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

大图片有什么问题？

你希望他们填写整个div并尊重你的大小比例吗？

Answer 2

我建议将这些图像作为背景图像属性添加到块级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/

设置多个div大小的随机图像

2 个答案: