【Bootstrap4】画像をレスポンシブ対応にする方法

 

ブロガーのかわん(@kawan0116)です。

今日は、Bootstrap4を使っている時に画像をレスポンシブ対応する方法です。

注意点

今回の方法は、僕の環境で上手くいっています。しかし、皆さまの環境では上手くいかない場合があります。

その時はごめんなさい。他サイト様の記事をご覧下さい。

また、コードをいじる為、失敗する可能性があります。

よって、バックアップを取ってから作業して下さい。

万が一不具合が発生しても僕ではサポート出来ない為、自己責任で行なって下さい。

画像をレスポンシブ対応にする方法

まずはコードをご覧頂きます。

<div class="col-md-4 col-xs-12">
    
        <img src="images/shop.jpg" class="img-fluid">
    
</div><!--col-md-4 col-xs-12-->

注目すべきはこちら。

<img src="images/shop.jpg" class="img-fluid">

「img」タグに「class="img-fluid"」を割り当てます。

たったこれだけで、画像がレスポンシブ対応になります。

画像について

僕の場合、画像の縦横サイズはアプリでトリミングして合わせています。

CSSでコントロールすることは可能だと思いますが、面倒なのでやっていません(笑)

まぁ、画像が何十枚とある場合はCSSでコントロールするかと思いますが・・・

まとめ

という事で、色々と書いてみました。

「img-fluid」はかなり便利なものですので、画像をレスポンシブ対応したいならおすすめです。

実装も簡単ですし、導入して損はないかと思います。

何度も言いますが、コードをいじるので思わぬ事態に遭遇する可能性があります。

よって、バックアップをしてから作業して下さい。

トラブルが発生しても僕ではサポート出来ませんので、自己責任で行なって下さいね。