HTMLで画像を表示する時、サイズを調整すると思いますが、画像を並べて表示する時、width: 100%;だけでは元画像のサイズによって、高さがバラバラになってしまいます。

See the Pen 画像を並べる by Uilou (@uilou754) on CodePen.

お知らせなどで、このようなレイアウトは良くありますが、width:100%;だけだとガタガタになってしまいますよね。
しかし、heightを固定してしまうと、画像が縦に引き伸ばされて表示されてしまいます。

今回はこの画像の表示サイズを調整する技をご紹介します。

画像のアスペクト比を固定して表示する調整のやり方

まず、横幅に合わせて、高さが変動する表示方法のご紹介です。
画像の表示アスペクト比を揃えるもので、width:100%;であっても、横幅に応じて、アスペクト比を維持するように高さが変化します。

See the Pen 画像を並べる（beforeで調整） by Uilou (@uilou754) on CodePen.

<div class="news_block">
    <div class="news_img">
        <img src="~~">
    </div>
    <h2>~~</h2>
</div>

やり方は画像を一度divタグで囲います。

.news_img {
    position: relative;
}
.news_img > img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

divタグにposition:relative;を、画像にposition: absoolute;を適応し、画像を浮かせます。
画像がposition:absolute;で浮くため、囲っているdivタグは中の要素を失い、width:0px; height:0px;になります。
なので、divタグには横幅を指定（width:100%;）してあげます。

.news_img {
    position: relative;
    width: 100%;
}
.news_img > img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

それでも高さは0pxのままです。
高さをどのように設定するかというと、ブロック要素化した疑似要素のbeforeを使用します。

.news_img {
    position: relative;
    width: 100%;
}
.news_img::before {
    display: block;
    padding-top: 60%;
    content: '';
}
.news_img > img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

beforeの注目すべき点はpadding-topです。
padding-topの%が横幅に対する高さの割合になります。
正方形なら100%に、16:9なら56%に設定します。

ここまでで、画像を囲うdivタグのサイズが同サイズに固定されたので、あとははみ出した画像をoverflow:hidden;で消してやります。

.news_img {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.news_img::before {
    display: block;
    padding-top: 60%;
    content: '';
}
.news_img > img {
    display: block;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
}

しかし、これだけだと画像の上部だけが表示されるようになってしまうので、どうせなら画像の中央をトリミングして使用したいと思います。
画像はabsoluteで浮いている状態なので、topとtransform;を使って、中央に寄せてあげましょう。

.news_img {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.news_img::before {
    display: block;
    padding-top: 60%;
    content: '';
}
.news_img > img {
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

これで完成です。
しかし、手順が多く、少々複雑です。

次に高さが固定でも画像が伸びない技をご紹介します。

画像のトリミングにはobject-fitを使う

先ほどのスタイルにobject-fitを使ってみましょう。

img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

これだけです。
画像自体に、width: 100%;とheight: 180px;を指定し、object-fit: cover;を設定すると、サイズからはみ出す部分を画像の中央が残るように自動的にトリミングしてくれます。

See the Pen 画像を並べる（object-fitで調整） by Uilou (@uilou754) on CodePen.

すごく便利でしょう？

※ IEではobject-fitは対応していませんので、IEに対応させようとしている人はご注意ください。

さらに、この便利なobject-fitを使って、高さも自動調節するやり方を紹介します。

縦横比（アスペクト比）を維持するにはaspect-ratioを使いましょう

aspect-ratioをご存じですか？
これは、高さを自動調節してくれるプロパティです。

See the Pen 画像を並べる（aspect-ratioで調整） by Uilou (@uilou754) on CodePen.

やっていることは以下の通りです。

img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

aspect-ratio: 16 / 9;って設定するだけで、ブロック要素の高さが横幅に対して、16:9の高さに調整されるのです。
すごく便利じゃないですか？
みなさんもぜひ使ってみてください！