画像を拡大して並べて表示する

Question

max-widthの1400pxというラッパーがあります。このdivには、幅が異なる2つのimg要素があります。私はflexboxを使用してそれらを一列に浮かべたいと思います。それらは1400ピクセル幅に収まるはずですが、まだよく見えるので、画像のように縮尺を変更する必要があります（赤い枠線は1400ピクセルのdivです）max-widthこれをどうすれば解決できますか？私はそれが十分明確であることを望む。

.wrapper { 
 
    display: flex; 
 
    max-width: 1400px; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <img src="https://dummyimage.com/hd1080"> 
 
    <img src="https://dummyimage.com/vga"> 
 
</div>

Answer 1

あなたはdiv内の画像をラップし、このように一方が他方より大きくするためにフレックスプロパティを調整することができます。

.wrapper { 
 
    display: flex; 
 
    max-width: 1400px; 
 
    width:100%; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
} 
 
.first { 
 
    height:300px; 
 
    flex:2; 
 
    position:relative; 
 
    border:1px solid #000; 
 
} 
 
.second { 
 
    height:300px; 
 
    flex:1; 
 
    position:relative; 
 
    border:1px solid #000; 
 
} 
 

 
img { 
 
    position:relative; 
 
    height:100%; 
 
    width:100%; 
 
}

<div class="wrapper"> 
 
    <div class="first"> 
 
    <img src="https://dummyimage.com/hd1080"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="https://dummyimage.com/vga"> 
 
    </div> 
 
</div>