設置多個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大小的隨機圖像

回答

相關問題