232 votes

Comment étirer une image pour remplir une <div> tout en conservant le format de l'image ?

Je dois faire en sorte que cette image s'étire jusqu'à la taille maximale possible sans déborder de son cadre. <div> ou de biaiser l'image.

Je ne peux pas prédire le rapport hauteur/largeur de l'image, il n'y a donc aucun moyen de savoir s'il faut l'utiliser :

<img src="url" style="width: 100%;">

o

<img src="url" style="height: 100%;">

Je ne peux pas utiliser les deux (c'est-à-dire style="width : 100% ; height : 100% ;") parce que cela étirerait l'image pour qu'elle s'adapte à la taille de l'écran. <div> .

En <div> a une taille fixée en pourcentage de l'écran, ce qui est également imprévisible.

2 votes

Si vous avez besoin que l'image soit remplie en hauteur ou en largeur aux dimensions correspondantes de la div, je ne peux que penser à utiliser javascript. Est-ce quelque chose que vous souhaitez explorer ?

1 votes

2 votes

La réponse est object-fit voir (et upvote) @daniels ci-dessous

205voto

Mottie Points 31167

Mise à jour 2016 :

Les navigateurs modernes se comportent beaucoup mieux. Tout ce que vous devez faire est de fixer la largeur de l'image à 100 % ( démo )

.container img {
   width: 100%;
}

Comme vous ne connaissez pas le rapport hauteur/largeur, vous devrez utiliser des scripts. Voici comment je procéderais avec jQuery ( démo ):

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

script

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

0 votes

L'utilisateur peut-il voir l'image avant le redimensionnement ? Quelqu'un a testé cela ?

0 votes

La solution est presque correcte, il suffit d'inverser la hauteur et la largeur dans le code : si l'image est "haute", la largeur doit être de 100% et non la hauteur (qui sera plus grande et débordante). C'est l'inverse pour les photos larges.

0 votes

@mbritto : Vous avez raison, j'ai dû changer le css pour max-width/height et j'ai ajouté une balise démo

91voto

Ryan Points 19

Il existe un moyen beaucoup plus simple d'effectuer cette opération en utilisant uniquement la fonction CSS et HTML :

HTML :

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

Votre image sera placée en arrière-plan et sera étirée pour s'adapter à la taille de l'écran. div sans distorsion.

0 votes

Est-ce possible avec un nombre indéfini d'images ?

0 votes

background-size: cover; est la vraie magie ici, et c'est du CSS3 mais avec un support raisonnable des navigateurs sur les versions les plus récentes (voir : w3schools.com/cssref/css3_pr_background-size.asp )

2 votes

Il pourrait être utile d'inclure l'url de l'image dans le code HTML, afin de séparer le style et le contenu, c'est-à-dire <div style="background-image: url('path/to/image.jpg');" class="fill"></div>

72voto

Prouda Points 131

Ce n'est pas une solution parfaite, mais ce CSS peut aider. Le zoom est ce qui permet à ce code de fonctionner, et le facteur devrait théoriquement être infini pour fonctionner idéalement pour les petites images - mais 2, 4 ou 8 fonctionnent bien dans la plupart des cas.

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

1 votes

J'aimerais que cela fonctionne avec Firefox. Pourquoi pas zoom l'amour de Firefox !?

1 votes

Firefox n'a toujours pas zoom mais voici le lien du bogue pour référence future : bugzilla.mozilla.org/show_bug.cgi?id=390936

0 votes

J'adore ce produit, je l'enregistre en tant que produit extensible et j'en fais bon usage.

57voto

Ed Stennett Points 346

Mise à jour 2019.

Vous pouvez maintenant utiliser le object-fit qui accepte les valeurs suivantes : fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Par exemple, vous pouvez avoir un conteneur qui contient une image :

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;
}

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

36voto

daniels Points 79

Si vous le pouvez, utilisez des images d'arrière-plan et définissez background-size: cover . L'arrière-plan couvrira ainsi l'ensemble de l'élément.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Si vous êtes obligé d'utiliser des images en ligne, il existe quelques options. Tout d'abord, il y a

Ajustement de l'objet

Cette propriété agit sur les images, les vidéos et les autres objets similaires à background-size: cover .

CSS

img {
  object-fit: cover;
}

Tristement, support du navigateur n'est pas très bonne, IE jusqu'à la version 11 ne la prenant pas du tout en charge. L'option suivante utilise jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Sur mesure plugin jQuery

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Utilisez le plugin comme suit

jQuery('.cover-image').coverImage();

Il prend une image, la définit comme image d'arrière-plan sur l'élément enveloppant de l'image et supprime l'élément img du document. Enfin, vous pouvez utiliser

CSS pur

Vous pouvez l'utiliser comme solution de repli. L'image sera agrandie pour couvrir son conteneur, mais elle ne sera pas réduite.

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

J'espère que cela pourra aider quelqu'un, bon codage !

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X