飼養圖像寬高比的分割

我有div的n個的分割，其由不同大小的圖像的：飼養圖像寬高比的分割

<div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<div> <img ng-src="{{backgroundImage}}" /> </div> 
<!-- dynamically the images will be loaded --> 
</div>

我尋找的功能是：

無論圖像的數量如何，它們都必須在一行中流動，這意味着如果有大量圖像，它們應該重新調整大小以適合較小的圖像。
的圖像縱橫比必須保持在重新調整大小
在div應該是全部相等的寬度和高度上尺寸調整
什麼其實我喜歡的是對每個圖像在與所有其他圖像一致的正方形內對齊。每張圖片應該在自己的正方形內進行約束和重新調整大小。然後，我希望所有包含正方形的大小都在整行上排列。隨着圖像數量的增加，正方形的大小相應減小。

我已經嘗試和搜索了很多解決方案，但沒有任何工作。請用我上面提到的功能來演示一些真實的例子。

來源

2015-12-21 sampu

你想說的是方格不會去下一行，但不是。 divs增加它變得更小？ –

是完全與圖像在重新大小的div保持縱橫比 – sampu

你可能想看看flexiboxes。您的所有需求應該可以用純CSS來完成。 – BroiSatse

你可以嘗試這樣的事情，雖然它需要額外的div：

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.outer-wrap-img { 
 
    display: table; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 
.inner-wrap-img { 
 
    display: table-cell; 
 
} 
 
.inner-wrap-img div { 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
} 
 
.inner-wrap-img div img { 
 
    display: block; 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    position: absolute; 
 
} 
 
.red { 
 
    background: #F00; 
 
} 
 
.green { 
 
    background: #0f0; 
 
}

<div class="outer-wrap-img"> 
 
    <div class="inner-wrap-img"> 
 
    <div class="red"> 
 
     <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="inner-wrap-img"> 
 
    <div class="green"> 
 
     <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="inner-wrap-img"> 
 
    <div class="red"> 
 
     <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="inner-wrap-img"> 
 
    <div class="green"> 
 
     <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" /> 
 
    </div> 
 
    </div> 
 
    <div class="inner-wrap-img"> 
 
    <div class="red"> 
 
     <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="inner-wrap-img"> 
 
    <div class="green"> 
 
     <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="inner-wrap-img"> 
 
    <div class="red"> 
 
     <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" /> 
 
    </div> 
 
    </div> 
 

 
    <div class="inner-wrap-img"> 
 
    <div class="green"> 
 
     <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" /> 
 
    </div> 
 
    </div> 
 

 

 

 
</div>

來源

2015-12-21 14:45:23

它的幫助，但一個簡單的問題，我想要包裝當爲特定分辨率添加更少或更多的圖像時，高度尺寸被固定 – sampu

這應該滿足您的要求。設置總數沒有。將圖像轉換爲變量imageCount，代碼將相應地進行計算。現在我已經給出背景紅色。您可以設置圖片的網址，當您使用

var imageCount = 27; 
 

 
    var width = window.innerWidth; 
 
    var divWidth = width/imageCount; 
 
    var html = ""; 
 
    for(var i=0;i<imageCount;i++) 
 
    { 
 
     html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>"; 
 
    } 
 
    document.getElementById("images").innerHTML = html;

*{ 
 
     padding: 0; 
 
     margin: 0; 
 
    }

<div id="images"> 
 

 
</div>

來源

2015-12-21 12:59:56

感謝您的回覆，您可以更具體，我有2個div：1包裝，2圖像保存 – sampu

使用Flexbox的，或者，你可以使用一個表。

來源

2015-12-21 13:19:16 arrow

你不應該使用表佈局。見http://stackoverflow.com/a/84986/3415618 – Jeremy

我寧願使用純CSS和HTML，這樣的事情：

<div class="ratio-16-9"> 
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View"> 
</div> 

<style> 
    .ratio-16-9, 
    .ratio-12-9, 
    .ratio-1-1 { 
     display: block; 
     position: relative; 
     height: 0; 
     overflow: hidden; 
     padding-bottom: 56.25%; 
    } 

    .ratio-16-9 img, 
    .ratio-12-9 img, 
    .ratio-1-1 img { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
    } 

    .ratio-1-1 { 
     padding-bottom: 100%; 
    } 

    .ratio-12-9 { 
     padding-bottom: 73.47%; 
    } 
</style>

來源

2015-12-21 13:28:35

謝謝你的答案，但我需要在所有n個部門的圖像n個分區，在一行 – sampu

飼養圖像寬高比的分割

回答

相關問題