web-dev-qa-db-fra.com

Comment définir la largeur maximale de l'image réactive (Bootstrap 4)?

Question:

  • Comment définissez-vous la largeur maximale d'une image dans Bootstrap 4 tout en conservant la réactivité de l'image?

Contexte:

  • Boostrap 4's .img-fluid classe rend les images réactives.

largeur max: 100%; et hauteur: auto; sont appliqués à l'image afin qu'elle évolue avec l'élément parent ( https://getbootstrap.com/docs/4.1/content/images/ )

Ma situation:

  • Voir JS Fiddle : https://jsfiddle.net/aq9Laaew/290257/
  • J'ai une image qui est très grande ... trop grande.

  • J'ai mis max-width: 500px (style en ligne), ce qui définit la largeur de l'image - Génial.

  • Problème : Il ne redimensionne pas/ne répond pas lorsque vous réduisez la taille de la fenêtre ... Il n'est plus réactif.

J'espère que c'était clair; J'ai essayé de chercher des questions similaires ici, mais sans succès. À votre santé!

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