web-dev-qa-db-fra.com

CSS Taille de l'image, comment remplir, pas étirer?

J'ai une image et je veux lui donner une largeur et une hauteur spécifiques (en pixels)

Mais si je règle largeur et hauteur en utilisant css (width:150px; height:100px), l’image sera étirée et elle risque d’être laide.

Comment Remplir images à une taille spécifique en utilisant CSS, et ne pas étirer il?

Exemple d'image de remplissage et d'étirement:

Image originale:

Original

Image étirée:

Stretched

Image remplie:

Filled

Veuillez noter que dans l'exemple d'image remplie ci-dessus: l'image est d'abord redimensionnée à 150x255 (format d'image conservé), puis redimensionnée à 150x100.

cssimage
363
Mahdi Ghiasi

Si vous souhaitez utiliser l'image comme arrière-plan CSS, il existe une solution élégante. Utilisez simplement cover ou contain dans la propriété background-size CSS3.

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​

Alors que cover vous donnera une image agrandie, contain vous donnera une image réduite. Les deux préservent le format des pixels.

http://jsfiddle.net/uTHqs/ (en utilisant la couverture)

http://jsfiddle.net/HZ2FT/ (en utilisant contenir)

Cette approche présente l’avantage d’être conviviale pour les écrans Retina, comme indiqué dans guide rapide de Thomas Fuchs.

Il convient de mentionner que la prise en charge du navigateur pour les deux attributs exclut IE6-8.

352
depa

Vous pouvez utiliser la propriété css object-fit.

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

voir exemple ici

Il y a un polyfill pour IE: https://github.com/anselmh/object-fit

473
afonsoduarte

Le seul moyen réel est d’avoir un conteneur autour de votre image et d’utiliser overflow:hidden:

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Il est difficile en CSS de faire ce que vous voulez et de centrer l'image. Il existe une solution rapide dans jQuery telle que:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

55
Dominic Green

Améliorations sur le réponse la plus votée de cette question (PAS celui qui est accepté).
si vous utilisez bootstrap

Il y a trois différences:

  1. Fournir width:100% sur le style.
    Ceci est utile si vous utilisez bootstrap et souhaitez que l’image étire toute la largeur disponible.

  2. La spécification de la propriété height est facultative. Vous pouvez la supprimer/la conserver selon vos besoins.

    .cover {
   object-fit: cover;
   width: 100%;
   /*height: 300px;  optional, you can remove it, but in my case it was good */
}

  3. Soit dit en passant, il n’est PAS nécessaire de fournir les attributs height et width sur l’élément image car ils seront remplacés par le style.
    donc il suffit d’écrire quelque chose comme ça.

    <img class="cover" src="url to img ..."  />
51
Hakan Fıstık

Solution CSS sans JS ni image d’arrière-plan:

Méthode 1 "marge auto" (IE8 + - NOT FF!): 

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

Méthode 2 "transformation" (IE9 +): 

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/

La méthode 2 peut être utilisée pour centrer une image dans un conteneur largeur/hauteur fixe. Les deux peuvent déborder - et si l'image est plus petite que le conteneur, elle sera toujours centrée.

http://jsfiddle.net/5xjr05dt/3/

Méthode 3 "double wrapper" (IE8 + - NOT FF!): 

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;  */ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}
<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/5/

Méthode 4 "double emballage ET double image" (IE8 +): 

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;  */ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}
<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/

  • La méthode 1 supporte légèrement mieux - vous devez définir la largeur OR hauteur de l'image!
  • Avec les préfixes, la méthode 2 a également un support correct (à partir de ie9) - La méthode 2 n’a aucun support sur Opera mini!
  • La méthode 3 utilise deux wrappers - peut dépasser la largeur ET la hauteur.
  • La méthode 4 utilise une double image (une en tant que paramètre fictif), ce qui génère une surcharge de bande passante supplémentaire, mais un meilleur support des crossbrowser.

Les méthodes 1 et 3 ne semblent pas fonctionner avec Firefox

26
J.T. Houtenbos

Une autre solution consiste à placer l'image dans un conteneur de la largeur et de la hauteur souhaitées. En utilisant cette méthode, vous n’auriez pas à définir l’image comme image d’arrière-plan d’un élément.

Ensuite, vous pouvez le faire avec une balise img et simplement définir une largeur maximale et une hauteur maximale sur l'élément.

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

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

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

Désormais, lorsque vous modifiez la taille du conteneur, l’image grandit automatiquement aussi grande que possible, sans sortir des limites ni déformer.

Si vous voulez centrer l'image verticalement et horizontalement, vous pouvez modifier le conteneur css en:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

Voici un JS Fiddle http://jsfiddle.net/9kUYC/2/

9
earl3s

S'appuyant sur la réponse de @Dominic Green à l'aide de jQuery, voici une solution qui devrait fonctionner pour des images plus larges que hautes ou plus larges que larges.

http://jsfiddle.net/grZLR/4/

Il existe probablement une manière plus élégante de faire du JavaScript, mais cela fonctionne.

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();
5
ramdog

J'ai aidé à construire un plugin jQuery appelé Fillmore , qui gère le background-size: cover dans les navigateurs qui le prennent en charge et qui dispose d'un shim pour ceux qui ne le font pas. Jetez un coup d'oeil!

4
Aidan Feldman

Cela remplira les images à une taille spécifique, sans les étirer ni les recadrer

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

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

Je pense qu'il est assez tard pour cette réponse. Quoi qu'il en soit, espérons que cela aidera quelqu'un à l'avenir. J'ai fait face au problème de positionnement des cartes en angle. Il y a des cartes affichées pour un tableau d'événements. Si la largeur de l'image de l'événement est grande pour la carte, l'image doit être affichée en la coupant des deux côtés et à une hauteur de 100%. Si la hauteur de l'image est longue, la partie inférieure de l'image est recadrée et sa largeur est de 100%. Voici ma solution css pure pour cela:

enter image description here

HTML: 

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}
3
Nodirabegimxonoyim

Essayez quelque chose comme ceci: http://jsfiddle.net/D7E3E/4/

Utiliser un conteneur avec débordement: hidden

EDIT: @Dominic Green m'a battu.

3
woutr_be
  • Ne pas utiliser de fond css
  • Seulement 1 div pour le couper
  • Redimensionné à la largeur minimale que conserver le rapport d'aspect
  • Recadrer à partir du centre (verticalement et horizontalement, vous pouvez ajuster cela avec le haut, le gauche et transformer)

Soyez prudent si vous utilisez un thème ou quelque chose, ils déclareront souvent img max-width à 100%. Vous devez en faire aucun. Testez-le :)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}
1
dmegatool