web-dev-qa-db-fra.com

bootstrap responsive img mais change la hauteur et la largeur de l'image

mon en-tête est une image .png et je lui ai donné le class="responsive-img" mais l'en-tête semble gros .. comment changer la hauteur et la largeur mais la garder plus petite?

imagetwitter-bootstrapresponsive-design
12
Ahmed Albusaidi

Bootstrap 4

Bootstrap 4 a introduit quelques nouvelles classes concernant les images .

Les images réactives sont maintenant .img-fluid

Les images en Bootstrap sont rendues réactives avec .img-fluid. Max-width: 100%; et height: auto; sont appliquées à l'image afin qu'elle évolue avec l'élément parent.

exemple: 

<img src="..." class="img-fluid" alt="Responsive image">

Qu'est-ce que img-fluid faire?

.img-fluid {
  max-width: 100%;
  height: auto;
}

Les images utilisées comme vignettes sont .img-thumbnail

exemple img-fluid:

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}

div {
  width: 100%;
  background-color: lightgreen;
  margin-bottom: 10vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!-- img-fluid -->

<div>
  <svg class="bd-placeholder-img img-fluid" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"></rect><text fill="#dee2e6" dy=".3em" x="50%" y="50%">img-fuid</text></svg>
</div>

exemple de vignette img

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}

div {
  width: 100%;
  background-color: lightgreen;
  margin-bottom: 10vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<!-- img-thumbnail -->
<div>
  <svg class="bd-placeholder-img img-thumbnail" width="200" height="200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 200x200"><title>Placeholder</title><rect fill="#868e96" width="100%" height="100%"></rect><text fill="#dee2e6" dy=".3em" x="50%" y="50%">200x200</text></svg>
</div>

Pré-bootstrap 4

Tout d'abord, c'est class="img-responsive" et pas class="responsive-img"

Cette classe elle-même ne vous mènera pas loin car elle ne fait que ceci:

.img-responsive{
  display: block;
  max-width: 100%;
  height: auto;
}

Je vous recommande d'écraser la classe et d'ajouter les détails de ce que vous voulez. Si vous souhaitez uniquement modifier la hauteur et la largeur (et les garder réactives et plus petites), voici un exemple de base:

.img-responsive {
  max-width: 90%; /* or to whatever you want here */
  max-height: auto; /* or to whatever you want here */
}

Toucher la hauteur déformera votre image réactive (sauf si c'est ce que vous voulez), donc je vous recommande de jouer avec la largeur max. Essayez également d'ajouter une largeur minimale.

Requêtes médias

Vous pouvez aussi utiliser @media, si vous savez déjà comment votre image est censée regarder des tailles de fenêtre spécifiques:

    /* start of desktop styles */

@media screen and (max-width: 991px) {
     /* start of large tablet styles */
     .img-responsive {
       min-width: 70%;
     }
}

@media screen and (max-width: 767px) {
     /* start of medium tablet styles */
     /* Adding a fixed/percentage min-width could ensure that the image doesn't get too small */
     .img-responsive {
       min-width: 30%;
     }
}

@media screen and (max-width: 479px) {
     /* start of phone styles */
     /* It's possible to hide the image if the screen becomes too small */
     .img-responsive {
       min-width: 10%;
     }
}

Plus d'informations sur les tailles d'écran ici

Plus d'informations sur les types de médias ici

30
kemicofa