異なる大きさの画像どうしの幅を縦横比を固定したまま合わせる方法を教えてください。

Question

異なる複数の種類の画像を縦に並べるレイアウトを作成しています。しかし、一部だけ幅と高さがひとまわり大きい画像があり、バランスが悪く見えてしまいます。（本来持っている大きさが違うようです）

width何パーセントで指定して良いかもわからず行き詰まりました。ブラウザが伸びたり縮んだりしたときに合わせて大きさが変わるようにしたいので、固定幅で作ることは避けています。

コードの中のリストタグ内にある、大きさの異なる画像1と2は元々違う大きさを持っているが、レイアウトの構成上、縦横比を固定したまま幅だけは揃えたいです。

対応策を教えていただけますでしょうか。よろしくお願いします。

※リストタグ内には画像以外にもテキストなどが入っていますが、今回は画像の話なのでごちゃつかないようにhtmlからはテキストは削除しています。
cssのコードに関係なさそうな、コードが入っている場合がありますが、それはテキストなどに当てる用のスタイルになります。

<div class="main-contents-right clearfix">
<!--contents-->
<div class="contents-all-area">
　　<ul class="contents-area">
						
　　　<li class="contents-list">
　　　　　<div class="img-thumb">
　　　　　　<a href="">
           <img src="image/IMG_8960のコピー_1.jpg" alt="大きさが違う画像1" class="contents-image-size">
         </a>
　　　　</div>
     </li>
						
　　　<li class="contents-list">
　　　　　<div class="img-thumb">
　　　　　　<a href="">
           <img src="image/IMG_8960のコピー_1.jpg" alt="大きさの違う画像2" class="contents-image-size">
          </a>
　　　　</div>
     </li>
コード

/*contents-all-area*/
.main-contents-right{
	float: right;
	width: 	100%;
}

.contents-all-area{
	padding-left: 300px;
	padding-right: 50px;
	max-width:1080px;
}

.contents-list{
	display: flex;
	padding-bottom: 40px;
	padding-top: 40px;
	border-bottom: solid 1px #74bbc3;
}

.img-thumb{
何パーセントにしたら良いかわかりません。
}
.contents-image-size{
何パーセントにしたら良いかわかりません。	 
}
コード

Answer 1

両方widthは100%でいいんじゃないでしょうか？そうすれば親要素いっぱいに表示されます。
ここでいう%は、親要素に対する%なので、下の画像のサイズは関係ありません。

横幅を指定すれば縦幅は縦横比を保ったまま調整されるはずです。