動態的圖像寬度和高度

Question

我想有一個圖像組的三個圖像。每個圖像必須具有相同的動態高度，並且圖像組必須使用它的父div的大小的100％（因此第一個圖像的margin-left與最後一個圖像的margin-right相同）

基本上我需要的是完全動態的CSS或JS解決方案。

我的目標：Width, height and if possible margin between images should be dynamic.

我到目前爲止有：

.img-group { 
 
    margin-top: 10px; 
 
    width: 100%; 
 
} 
 

 
.img { 
 
\t float: left; 
 
\t margin: 4%; /*Margin should, but doesn't have to be dynamic...*/ 
 
\t height: 20%; /*Height has to be dynamic...*/ 
 
}

<div class="container"> 
 
    <div class="img-group"> 
 
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png"> 
 
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg"> 
 
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg"> 
 
    </div> 
 
</div>

Answer 1

.img-group { 
 
    margin-top: 10px; 
 
    width: 100%; 
 
} 
 

 
.img { 
 
\t float: left; 
 
\t margin: 0 4%; /*Margin should, but doesn't have to be dynamic...*/ /*Height has to be dynamic...*/ 
 
    max-height: 30px; 
 
    height: auto; 
 
} 
 
.container { 
 
width: 100%; 
 
display: flex; 
 
flex-wrap: wrap; 
 
justify-content: center; 
 
}

<div class="container"> 
 
    <div class="img-group"> 
 
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png"> 
 
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg"> 
 
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg"> 
 
    </div> 
 
</div>

Answer 2

我不能說我completel你明白你在做什麼，但這是我的回答。

您可以編輯樣式的高度，圖像和img-group潛水會相應地展開。

我把元素周圍的邊框看成每個元素的「空間」。你可以從樣式中刪除它們。

.container { 
 
    width: 800px; 
 
    height: 300px; 
 
    position: relative; 
 
    display: block; 
 
    border: 4px solid red; 
 
} 
 

 
.img-group { 
 
    height: 97.5%; 
 
    position: relative; 
 
    display: block; 
 
    border: 4px solid purple; 
 
} 
 

 
.img { 
 
    float: left; 
 
    margin: 1%; 
 
    /*Margin should, but doesn't have to be dynamic...*/ 
 
    height: 40%; 
 
    /*Height has to be dynamic...*/ 
 
    border: 4px solid green; 
 
    position: relative; 
 
    display: inline; 
 
}

</style> 
 

 
<div class="container"> 
 
    <div class="img-group"> 
 
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png"> 
 
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg"> 
 
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg"> 
 
    </div> 
 
</div>

Answer 3

如果你的形象總是相同的大小已知的，並且你需要設置寬度，使他們能夠填滿整個行和調整大小以相同的高度。

Snippet CSS已評論。

.container { 
 
    width:80%;/* whatever*/ 
 
    margin:auto; 
 
    border:solid;/* see me */ 
 
    overflow:hidden;/* wraps float*/ 
 
    /* or use : 
 
    display:flex; 
 
    */ 
 
} 
 
img { 
 
    float:left;/* unless parent is set to display:flex;,but it will be a fallback for old browsers*/ 
 
    width:20.1%;/* the smallest, others will be reset */  
 
} 
 
img[src*="Logo.svg.png"] { 
 
    width:52.1%;/* obviously the widest*/ 
 
} 
 
img[src*="logo.jpg"] { 
 
    width:27.77%;/* the other one */ 
 
}

<div class="container"> 
 
    <div class="img-group"> 
 
    <img class="img" src="http://lofrev.net/wp-content/photos/2017/03/4k_ultra_hd_logo.jpg"/> 
 
    <img class="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Digital_Europe_Ultra_HD_-_Logo.svg/1024px-Digital_Europe_Ultra_HD_-_Logo.svg.png"/> 
 
    <img class="img" src="http://hometheaterreview.com/4K-HDR-logo-thumb.jpg"/> 
 
    </div> 
 
</div>