web-dev-qa-db-fra.com

Comment rendre toutes les images de hauteur et de largeur différentes identiques via CSS?

J'essaie de créer un mur d'images composé de photos de produits. Malheureusement, ils ont tous une hauteur et une largeur différentes. Comment utiliser les CSS pour que toutes les images aient la même taille? de préférence 100 x 100. 

Je pensais faire une div dont la hauteur et la largeur étaient de 100 pixels, puis comment le remplir. Je ne sais pas comment faire ça. 

Comment puis-je accomplir cela?

htmlcssimagecss3resize
50
ariel

.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}
<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>

109
Simon Arnold

puis-je simplement ajouter que si vous déformez trop vos images, c'est-à-dire que vous les sortez d'un rapport, elles risquent de ne pas sembler correctes, et définissez le conteneur sur 100 x 100, puis définissez votre image de manière à ce qu'elle ne déborde pas et définissez la plus petite largeur sur la largeur maximale du conteneur. 

par exemple 

<h4>Products</h4>
<ul class="products">
    <li class="crop">
        <img src="iPod.jpg" alt="iPod" />
    </li>
</ul>



.crop {
 height: 300px;
 width: 400px;
 overflow: hidden;
}
.crop img {
 height: auto;
 width: 400px;
}

De cette façon, l'image restera à la taille de son conteneur, mais sera redimensionnée sans rompre les contraintes 

25
Andi Wilkinson

Manière la plus simple - Cela permet de conserver la taille de l'image telle qu'elle est et de remplir l'espace restant de l'autre zone. Ainsi, toutes les images prendront le même espace spécifié quelle que soit la taille de l'image sans l'étirer

.img{
   width:100px;
   height:100px;

/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
    object-fit:scale-down;

}
13
Manoj Selvin

Vous pouvez utiliser la propriété object-fit pour dimensionner les éléments img:

  • cover étire ou réduit l'image proportionnellement pour remplir le conteneur. L'image est recadrée horizontalement ou verticalement si nécessaire.
  • contain étire ou réduit l'image proportionnellement pour l'adapter à l'intérieur du conteneur.
  • scale-down réduit l'image proportionnellement pour l'ajuster à l'intérieur du conteneur.

.example {
  margin: 1em 0;
  text-align: center;
}

.example img {
  width: 30vw;
  height: 30vw;
}

.example-cover img {
  object-fit: cover;
}

.example-contain img {
  object-fit: contain;
}
<div class="example example-cover">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

<div class="example example-contain">
  <img src="https://i.stack.imgur.com/B0EAo.png">
  <img src="https://i.stack.imgur.com/iYkNH.png">
  <img src="https://i.stack.imgur.com/gne9N.png">
</div>

Dans l'exemple ci-dessus: le rouge est un paysage, le vert est un portrait et le bleu est une image carrée. Le motif en damier se compose de carrés 16x16px.

8
Salman A

Pour ceux qui utilisent Bootstrap et ne veulent pas perdre leur réactivité, ne définissez pas la largeur du conteneur. Le code suivant est basé sur gillytech post.

index.hmtl

<div id="image_preview" class="row">  
    <div class='crop col-xs-12 col-sm-6 col-md-6 '>
         <img class="col-xs-12 col-sm-6 col-md-6" 
          id="preview0" src='img/preview_default.jpg'/>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-6">
         more stuff
    </div>

</div> <!-- end image preview -->

style.css 

/*images with the same width*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: auto;
    width: 100%;
}

OU style.css 

/*images with the same height*/
.crop {
    height: 300px;
    /*width: 400px;*/
    overflow: hidden;
}
.crop img {
    height: 100%;
    width: auto;
}
3
Sven Ya

Définir les paramètres de hauteur et de largeur dans un fichier CSS

.ImageStyle{

    max-height: 17vw;
    min-height: 17vw;
    max-width:17vw;
    min-width: 17vw;
    
}

1
Ema

Vous pouvez le faire de cette façon:

 .container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}

img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
1
Arun ks

Je cherchais une solution à ce problème, pour créer une liste de logos.

J'ai proposé cette solution qui utilise un peu de flexbox, ce qui fonctionne pour nous puisque nous ne sommes pas inquiets pour les anciens navigateurs.

Cet exemple suppose une boîte 100x100px mais je suis à peu près sûr que la taille pourrait être flexible/réactive.

.img__container {
    display: flex;
    padding: 15px 12px;
    box-sizing: border-box;
    width: 100px; height: 100px;

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

ps .: vous devrez peut-être ajouter des préfixes ou utiliser le préfixe automatique.

0
rafaelbiten

Sans code, il est difficile de vous aider, mais voici quelques conseils pratiques:

Je soupçonne que votre "mur d'images" a une sorte de conteneur avec un identifiant ou une classe pour lui donner des styles.

par exemple:

<body>

<div id="maincontainer">
  <div id="header"></div>

  <div id="content">
    <div id="imagewall">
      <img src"img.jpg">
<!-- code continues -->

Styliser une taille sur toutes les images de votre mur d'images, sans affecter les autres images, comme votre logo, etc., est facile si votre code est configuré de la même manière que ci-dessus.

#imagewall img {
  width: 100px;
  height: 100px; }

Mais si vos images ne sont pas parfaitement carrées, elles seront faussées de cette manière.

0
fredsbend

La taille de l'image ne dépend pas de la hauteur et de la largeur de la div,

utiliser img element en css

Voici le code css qui vous aide

div img{
         width: 100px;
         height:100px;
 }

si vous voulez définir la taille par div

utilisez ceci

div {
    width:100px;
    height:100px;
    overflow:hidden;
}

par ce code, votre image sera affichée en taille originale, mais le premier débordement de 100x100px sera masqué

0
asad raza

Sur la base de la réponse de Andi Wilkinson (la seconde), je me suis un peu améliorée, assurez-vous que le centre de l'image est bien affiché (comme le faisait la réponse acceptée):

HTML:

<div class="crop">
   <img src="img.png">
</div>

CSS:

.crop{
  height: 150px;
  width: 200px;
  overflow: hidden;
}
.crop img{
  width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
  -ms-transform: translateY(-50%); /* IE 9 */
  transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
0
Alexee

Accédez à votre fichier CSS et redimensionnez toutes vos images comme suit

img {
  width:  100px;
  height: 100px;
}
0
bakslash
.article-img img{ 
    height: 100%;
    width: 100%;
    position: relative;
    vertical-align: middle;
    border-style: none;
 }

Vous ferez la même taille d'image que div et vous pourrez utiliser la grille d'amorçage pour manipuler la taille de div en conséquence

0
Manav Kothari