web-dev-qa-db-fra.com

Redimensionnement automatique de l'image dans CSS FlexBox

J'ai utilisé la mise en page CSS flex box qui apparaît comme ci-dessous: 

enter image description here

Si l'écran devient plus petit, il se transforme en ceci: 

enter image description here

Le problème est que les images ne sont pas redimensionnées en conservant le rapport hauteur/largeur de l'image d'origine. 

Est-il possible d'utiliser CSS pur et la disposition de la boîte flexible pour permettre aux images d'être redimensionnées si l'écran devient plus petit?

Voici mon html: 

<div class="content">
  <div class="row"> 
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
</div>

mon CSS: 

.content {
    background-color: yellow;    
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    background-color: red;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;

}
htmlcsscss3flexbox
65
confile

img {max-width:100%;} est un moyen de le faire. Ajoutez-le simplement à votre code CSS.

http://jsfiddle.net/89dtxt6s/

45
Omega

Je suis venu ici pour chercher une réponse à mes images déformées. Pas tout à fait sûr de ce que l’opérateur recherche ci-dessus, mais j’ai trouvé qu’ajouter align-items: center permettrait de résoudre le problème. En lisant la documentation, il est judicieux de remplacer cette valeur si vous modifiez directement les images, car align-items: stretch est la valeur par défaut. Une autre solution consiste à envelopper vos images avec un div en premier. 

.myFlexedImage {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
53
gdbj

Vous voudrez peut-être essayer la toute nouvelle et simple fonctionnalité CSS3:

img { 
  object-fit: contain;
}

Il préserve le ratio d'image (comme lorsque vous utilisiez l'astuce image de fond) et, dans mon cas, fonctionnait parfaitement pour le même problème.

Attention, il n’est pas supporté par IE (voir détails du support ici ).

21
Lokinou

Je suggère de regarder dans les options background-size pour ajuster la taille de l'image. 

Au lieu d'avoir l'image dans la page si vous l'avez définie comme image d'arrière-plan, vous pouvez définir: 

background-size: contain

ou 

background-size: cover

Ces options prennent en compte la hauteur et la largeur lors du redimensionnement de l'image. Cela fonctionnera dans IE9 et tous les autres navigateurs récents.

4
user3196436

Dans la deuxième image, il semble que vous souhaitiez que l'image remplisse la zone, mais l'exemple que vous avez créé conserve le rapport hauteur/largeur (les animaux domestiques ont l'air normal, pas mince ni gras).

Je ne sais pas du tout si vous avez photoshopped ces images à titre d'exemple ou si la seconde est "comment ça devrait être" également (vous avez dit IS, alors que le premier exemple vous a dit "devrait")

Quoi qu'il en soit, je dois assumer:

Si "les images ne sont pas redimensionnées en conservant le rapport hauteur/largeur" ​​et que vous me montrez une image qui conserve le rapport hauteur/largeur des pixels, je dois supposer que vous essayez d'obtenir le rapport hauteur/largeur de la zone "rognage" (l'intérieur du le vert) WILE en conservant le rapport de format des pixels. C'est à dire. vous souhaitez remplir la cellule avec l'image en l'agrandissant et en la coupant.

Si c'est votre problème, le code que vous avez fourni NE reflète PAS "votre problème", mais votre exemple de départ.

Compte tenu des deux hypothèses précédentes, vous ne pouvez pas obtenir ce dont vous avez besoin avec des images réelles si la hauteur de la boîte est dynamique, mais avec des images d'arrière-plan. Soit en utilisant "background-size: contain" ou ces techniques (remplissage intelligent en pourcentages qui limitent le recadrage ou les tailles maximales où vous le souhaitez): http://fofwebdesign.co.uk/template/_testing/scale -img/scale-img.htm

La seule façon dont cela est possible avec des images est si nous OUBLIONS de votre deuxième image, et que les cellules ont une hauteur fixe, et FORTEMENT, à en juger par vos exemples d’images, la hauteur reste la même! 

Par conséquent, si la hauteur de votre conteneur ne change pas et que vous souhaitez conserver les images carrées, il vous suffit de définir la hauteur maximale des images sur la valeur connue (moins les marges ou les bordures, en fonction de la propriété box-sizing du cellules) 

Comme ça:

<div class="content">
  <div class="row">    
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
      </div>
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
      </div>
    </div>
</div>

Et le CSS: 

.content {
    background-color: green;
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px;
    border: solid 10px red;
    text-align: center;
    height: 300px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
}
img {
    margin: auto;
    width: 100%;
    max-width: 300px;
    max-height:100%
}

http://jsfiddle.net/z25heocL/

Votre code est invalide (les balises d’ouverture remplacent les fermetures; elles produisent donc des cellules NESTED, et non des frères et sœurs. Il a utilisé un SCREENSHOT de vos images dans le code défectueux. vous configurez "row" mais le code corrompu imbriquant une cellule dans une autre a entraîné un flex dans un flex, fonctionnant enfin en tant que COLUMNS . Je ne sais pas du tout ce que vous vouliez accomplir et comment vous en êtes arrivé à ce code, mais je suppose que ce que vous voulez est ceci.

J'ai ajouté display: flex aux cellules aussi, donc l'image est centrée (je pense que display: table aurait pu être utilisé ici aussi avec tout ce balisage)

3
sergio

C'est ainsi que je gérerais différentes images (tailles et proportions) dans une grille flexible.

.images {
  display: flex;
  flex-wrap: wrap;
  margin: -20px;
}

.imagewrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 20px);
  height: 300px;
  margin: 10px;
}

.image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* set to 'auto' in IE11 to avoid distortions */
}
<div class="images">
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1000x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/500x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
</div>
0
ggzone

HTML:

<div class="container">
    <div class="box">
        <img src="http://lorempixel.com/1600/1200/" alt="">
    </div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}
0
Ukr