web-dev-qa-db-ja.com

レスポンシブ画像の最大幅を設定する方法（Bootstrap 4）？

質問：

  • 画像の応答性を維持しながら、Bootstrap 4で画像の最大幅をどのように設定しますか？

背景：

  • Boostrap 4の.img-fluidクラスは、画像をレスポンシブにします。

最大幅：100％;と高さ：自動;親要素に合わせて拡大縮小されるように画像に適用されます（ https://getbootstrap.com/docs/4.1/content/images/ ）

私の状況：

  • JS Fiddleを参照してください： https://jsfiddle.net/aq9Laaew/290257/
  • 画像が非常に大きく、大きすぎます。

  • max-width: 500px（インラインスタイリング）を設定しました。これにより、画像の幅が設定されます-すごいです。

  • 問題：ウィンドウサイズを縮小してもサイズ変更/応答しません...応答しなくなりました。

それが明確だったことを願っています。ここで同様の質問を探してみましたが、うまくいきませんでした。乾杯！

cssbootstrap-4responsiveness
5
daCoda
.img-max {
  max-width: 500px
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<p class="alert-primary p-3">
  I can set the max-width of the image... but then it stops being responsive.
</p>
  



<div class="container">
  <div class="img-max">
  <img  class=" mx-auto d-block mb-2 float-md-left mr-md-4 img-thumbnail"  src="https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg">
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore ipsa ea dolorem mollitia repudiandae odit dolore quod et voluptatem asperiores odio quam ipsam placeat nisi quo voluptate, laborum provident earum?
  </p>
</div>
1
Ashish Mehta