web-dev-qa-db-fra.com

Comment ajuster l'image à l'intérieur de la div bootstrap?

J'utilise le div comme ci-dessous

<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive">
</div>

L'utilisateur téléchargera tout type d'image. Je dois donc adapter l'image à l'intérieur du div, cela signifie que je dois couvrir le div complet en utilisant l'image .. J'utilise bootstrap s'il vous plaît aviser.

htmlcsstwitter-bootstrapuser-interfaceweb
6
user1770268

Ajoutez simplement la largeur de vos images à 100%.

Mais comme vous le dites, l'utilisateur téléchargera différents types d'images, vous pouvez donc utiliser object-fit propriété.

Ajoutez le CSS comme ceci:

.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}

<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>

Vous trouverez les détails sur object-fit et object-position ici: https://css-tricks.com/on-object-fit-and-object-position/

14
Zahidul Islam Ruhel

Pour Bootstrap 4 utilisateurs, cela fonctionne

<div class="col-sm-6 col-md-6 col-lg-4">
    <img src="images/dummy_image.png" class="img-fluid">
</div>
7
Dawit Abraham

Il est prudent de supposer que par ajustement vous entendez couvrir toute la largeur. Ceci est dû au fait

  1. Vous ne connaissez généralement pas la hauteur simplement en utilisant col-sm-6 ou col-md-6 ou col-lg-4.
  2. Il y a une énorme probabilité de perte de rapport hauteur/largeur de l'image si vous essayez de la redimensionner selon votre propre volonté.

Utilisation <img src = "images/dummy_image.png" class = "img-responsive" width = "100%" /> pour le montage de la colonne. Cela ajustera votre image dans le sens de la largeur dans la colonne et modifiera automatiquement la hauteur (en gardant le rapport d'aspect à l'esprit), de sorte que vous n'avez pas à vous soucier de la redimensionnement illogique de l'image.

0
Pranav Totla