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

Ce à quoi je pense, c'est d'étirer la largeur ou la hauteur et de la laisser se redimensionner en fonction du ratio. Il y aura un espace blanc sur les côtés. Un peu comme un écran large affiche une résolution de 1024x768.

Answer 2

Je n'ai fait que changer la feuille de style de la balise img. Mais dans mon cas, je connaissais la div container avec et hauteur. De plus, la hauteur de la div container était supérieure à la taille réelle de l'image. J'espère que cela vous aidera.

Ça a marché pour moi.

http://guntucomputerhacks.blogspot.com.au/2014/08/force-image-width-and-height-without.html

Answer 3

Si l'utilisation de flexbox est une option valable pour vous (vous n'avez pas besoin de supporter les anciens navigateurs), consultez mon autre réponse. aquí (qui est peut-être un doublon de celui-ci) :

En gros, vous devez envelopper votre balise img dans un div et votre css doit ressembler à ceci :

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

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

Answer 4

C'est une vieille question, mais j'ai eu exactement le même problème ennuyeux où tout fonctionnait bien pour Chrome/Edge (avec la propriété object-fit) mais la même propriété css ne fonctionnait pas dans IE11 (car elle n'est pas supportée dans IE11), j'ai fini par utiliser l'élément HTML5 "figure" qui a résolu tous mes problèmes.

Personnellement, je n'ai pas utilisé la balise DIV externe, car elle n'a été d'aucune utilité dans mon cas. J'ai donc évité le DIV externe et l'ai simplement remplacé par l'élément "figure".

Le code ci-dessous force la réduction de l'image (sans modifier le rapport d'aspect original).

<figure class="figure-class">
  <img class="image-class" src="{{photoURL}}" />
</figure>

et des classes css :

.image-class {
    border: 6px solid #E8E8E8;
    max-width: 189px;
    max-height: 189px;
}

.figure-class {
    width: 189px;
    height: 189px;
}