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

我有一个有四个div容器的图库网格。我想附上任何图像内的divs，请记住，每个div盒有不同的高度和宽度。应该以div为中心，在四面都留下合理的填充。请检查链接以获得更好的理解JsFiddle http://d.alistapart.com/fluid-images/3-4.png 设置多个div大小的随机图像

任何帮助，高度赞赏。这里

<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; 
    }

来源

2013-03-25 Yasser Alwan

输入代码我不知道，如果你使用

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

大图片是什么问题，我理解你的问题......？

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

来源

2013-03-25 17:41:49 laurent

这个想法是拉取存储在数据库中的图像，并动态地将它们放入具有不同大小的div容器中。 – 2013-03-25 21:06:03

我建议将这些图像作为背景图像属性，以块级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-25 18:08:24 chrisgonzalez

如果我们将其应用于宽度和高度不同的多个图像，这将不起作用。 – 2013-03-25 21:02:15

无论图像的宽度和高度如何，这都可以工作！包含将始终适用于内容与包含元素的最佳匹配。 – chrisgonzalez 2013-03-26 21:15:41

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

回答

相关问题