Comment définir la largeur et la hauteur d'une image sans l'étirer ?

Question

Si je l'ai fait :

#logo {
    width: 400px;
    height: 200px;
}

entonces

<img id="logo" src="logo.jpg"/>

va s'étirer pour remplir cet espace. Je veux que l'image reste de la même taille, mais qu'elle prenne autant d'espace dans le DOM. Dois-je ajouter un élément encapsulant <div> o <span> ? Je déteste ajouter des balises pour le style.

Answer 1

Oui, vous avez besoin d'un div encapsulant :

<div id="logo"><img src="logo.jpg"></div>

avec quelque chose comme :

#logo { height: 100px; width: 200px; overflow: hidden; }

Les autres solutions (padding, margin) sont plus fastidieuses (dans la mesure où vous devez calculer la bonne valeur en fonction des dimensions de l'image) mais ne permettent pas non plus au conteneur d'être plus petit que l'image.

En outre, les éléments ci-dessus peuvent être adaptés beaucoup plus facilement à différentes mises en page. Par exemple, si vous voulez l'image en bas à droite :

#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }

Answer 2

Réponse 2017

Ajustement de l'objet CSS fonctionne dans tous les navigateurs actuels. Il permet img pour qu'il soit plus grand sans étirer l'image.

Vous pouvez ajouter object-fit: cover; à votre CSS.

Answer 3

Chargez l'image comme arrière-plan d'un div.

Au lieu de :

<img id='logo' src='picture.jpg'>

faire

<div id='logo' style='background:url(picture.jpg)'></div>

Tous les navigateurs recadrent la partie de l'image qui ne convient pas.
Cela présente plusieurs avantages par rapport à l'habillage d'un élément dont le débordement est masqué :

1. Pas de majoration supplémentaire. Le div remplace simplement l'img.
2. Centrez facilement l'image ou réglez-la sur un autre décalage, par exemple. url(pic) center top;
3. Répétez l'image lorsqu'elle est suffisamment petite. (Ok, je ne sais pas, pourquoi vous voulez ça)
4. Définissez une couleur de fond dans la même déclaration, appliquez facilement la même image à plusieurs éléments, et tout ce qui s'applique aux images de fond.

Mise à jour : Cette réponse date d'avant object-fit ; vous devriez maintenant probablement utiliser object-fit/object-position.

Elle reste utile pour les navigateurs plus anciens, pour les propriétés supplémentaires (comme background-repeat) et pour les cas limites (par exemple, contourner les bogues de Chrome avec flexbox et object-position et les (anciens ?) problèmes de FF avec grid + autoheight + object-fit. Les divs enveloppantes dans la grille / flexbox donnent souvent des résultats... peu intuitifs).

Answer 4

Ajustement d'objet CSS3

Je ne suis pas sûr de l'état d'avancement de sa mise en œuvre par webkit, IE et firefox. Mais Opera fonctionne comme par magie

object-fit fonctionne avec le contenu SVG, mais le même effet peut également être obtenu en définissant l'attribut preserveAspectRatio="" dans le SVG lui-même.

img {
  height: 100px;
  width: 100px;
  -o-object-fit: contain;
}

Chris Mills en fait la démonstration ici http://dev.opera.com/articles/view/css3-object-fit-object-position/

Answer 5

#logo {
    width: 400px;
    height: 200px;

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