画像のサイズをCSSで調整するには、あらかじめ用意しているクラス「resizeXX」を使います。
以下のように「resize10」~「resize90」でサイズを調整します。
「resizeXX」のXXの部分に入れた数値のパーセンテージにまでリサイズされます。
なお、サイズに10%を指定した場合、画像のサイズが10%になるわけではなく、画像が置かれているエリアの10%の大きさになります。
画像のサイズがエリアのサイズより小さい場合は、横幅いっぱいまで広がらない場合がありますので、ご注意ください。
1 |
<div class="al-c m100-t"><img class="resize10 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize20 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize30 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize40 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize50 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize60 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize70 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize80 outline" alt="サンプル" src="./images/sample013.jpg"></div> |
1 |
<div class="al-c m30-t"><img class="resize90 outline" alt="サンプル" src="./images/sample013.jpg"></div> |