如何通過改變它們的高度並保持它們的縱橫比來完全填充幾行圖像

Question

我有一個想通過 CSS 解決的設計問題，但我覺得它可以只用一個 javascript 來完成。

我有一個不同大小和比例的圖片庫。 我希望他們：

1. 分布在更多行中
2. 根據給定的最大高度和查看它們的顯示器尺寸調整它們的大小和行分布
3. 填充單行的所有空間，它們之間有固定的邊距

這是我想要完成的草圖

如您所見，第二行高於第一行，以便用較大的圖像填充所有空間，我對此表示滿意（這是唯一可以做到的方法）。

我沒能做到這一點。 我能做的最好的事情是平均分配具有固定邊距但縱橫比完全混亂的圖像（我知道這里的問題是min-width and max-height ......為什么我不能給出max-height並調整width結果？）

HTML

<div class="img-blocco">
    <img src=“1.jpg” /> <img src=“2.jpg” /> … <img src=“n.jpg” /> 
</div>

CSS

.img-blocco {
    height: 100%;
    width: 90%;
    padding: 0 5%;
    overflow: hidden;
    position: relative;
    display:flex;
    flex-wrap: wrap;
}

.img-blocco img {
    margin: 0 5px 10px;
    min-width:200px;
    max-height:300px;
    flex-grow:1;
}

我顯然設法以正確的縱橫比平均分布我的圖像，並將它們與justify-content: space-between隔開，但我根本不喜歡這種解決方案。

有任何想法嗎？

Answer 1

希望這就是你正在尋找的——筆。

請注意，CSS 屬性object-fit在 ie11 中存在瀏覽器支持問題。 讓我知道這是否有幫助。

Answer 2

我有一個類似的問題。 我有一個 div 包含以下 CSS 的所有圖像

#ImageHolder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: center;
    justify-content: left;
}
.thumbnail {
    height: 25vh;
    margin: 0.5vh 0.25vw 0.25vw 0.5vh;
    user-select: none;
}

然后我使用以下 JS 函數等到所有項目都加載loadCheck() ，通過並找到具有相同頂部位置的圖像adjustAll() ，然后調整它的大小以用resize()填充整行

出於某種原因，我必須運行 resize 兩次才能使其正確適應，但它確實有效。

function resize(workinglist){
    var vw=window.innerWidth/100;
    var maxWidth=ImageHolder.getBoundingClientRect().width-(workinglist.length * 0.5 * vw);
    var totalWidth=0;
    for (x in workinglist){
        totalWidth+=workinglist[x].getBoundingClientRect().width
    }
    var ratio=2-(totalWidth/maxWidth);
    for (x in workinglist){
        workinglist[x].style.height=(workinglist[x].getBoundingClientRect().height*ratio)+"px";
    }
    var totalWidth=0;
    for (x in workinglist){
        totalWidth+=workinglist[x].getBoundingClientRect().width
    }
    return [totalWidth,maxWidth,ImageHolder.getBoundingClientRect().width,ratio];
}



function adjustAll(){
    var workinglist=[];
    var imgs=Array.from(ImageHolder.children);
    for (place in imgs) imgs[place].style.height="";
    var imgTop=imgs[0].getBoundingClientRect().top;
    for (place in imgs){
        if (imgs[place].getBoundingClientRect().top==imgTop){
            workinglist.push(imgs[place]);
        }else{
            resize(workinglist);
            resize(workinglist);
            workinglist=[];
            imgTop=imgs[place].getBoundingClientRect().top;
            workinglist.push(imgs[place]);
        }
    }
}

function loadCheck(){
     var imgs=Array.from(ImageHolder.children);
     for (place in imgs){
         if (! imgs[place].complete){
             console.log("Not Loaded yet");
             return false;
         }
     }
     adjustAll();
     clearInterval(lc);
     console.log("I resized everyone");
}

ls=setInterval(loadcheck,100);

我還添加了一個函數來檢查窗口大小並在發生這種情況時運行adjustAll() 。

注意您需要在代碼中調整邊距的效果。 如果你做填充，那么你可以刪除調整大小功能中的邊距調整。

var maxWidth=ImageHolder.getBoundingClientRect().width-(workinglist.length * 0.5 * vw);

前

后