画像のサイズを修正

画像を表示するためのimg要素にサイズの情報を付加していない場合なら

HTML

<p class="sample">
    <img src="riverchildren.jpg" alt="写真">
</p>

上記では画像ファイル「riverchildren.jpg」を表示させていますが、縦横のサイズは記述していません。
この場合は、以下のようにCSSソースを記述するだけで、画像を望みのサイズで表示できます。

CSS

p.sample img {
    width: 200px;  /* 横幅を200pxに */
}

上記では、class名に「sample」が指定されたp要素に含まれるimg要素に対して、横幅200pxで表示する指定を加えています。これだけで、横幅が200pxになった上で、高さは縦横比を維持して自動調整されます。

https://www.nishishi.com/css/resize-image-keep-aspect-ratio.html