イメージの動的な幅と高さ

Question

3つのイメージのイメージグループがあります。すべての画像は同じ高さの動的高さを持つ必要があり、画像グループは親divのサイズの100％を使用する必要があります（最初の画像の余白は最後の画像の余白と同じです）

私が必要とするのは、完全に動的なCSSまたはJSソリューションです。

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

私がこれまで持っているもの：私は私completelを言うことができない

.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

あなたが成し遂げようとしていることを理解していますが、ここで答える試みです。

スタイルの高さを編集することができます。イメージと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

あなたのイメージは常に同じであり、既知のサイズの、あなたは彼らが行全体を埋めることができますし、同じ高さに大きさになるよう幅を設定する必要がある場合。

スニペット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>