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

Créez un div et donnez-lui une classe. Puis placez-y un img.

<div class="mydiv">

<img src="location/of/your/image" ></img>

</div>

Définissez la taille de votre div et rendez-la relative.

    .mydiv {
        position: relative;
        height:300px;
        width: 100%;
        overflow: hidden;
    }

puis styliser votre image

img {
    width: 100%;
    height: auto;
    overflow: hidden;
}

J'espère que cela vous aidera.

Answer 2

Vous pouvez utiliser comme ci-dessous :

.width100 {
  max-width: 100px;
  height: 100px;
  width: auto;
  border: solid red;
}

<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />

Answer 3

<img style="object-fit: contain" src="...">

Ça a parfaitement fonctionné pour moi.

Answer 4

Dois-je ajouter un <div> ou <span> encapsulant ?

Je pense que oui. La seule chose qui me vient à l'esprit est le remplissage, mais pour cela, vous devez connaître les dimensions de l'image au préalable.

Answer 5

Vous pouvez essayer de définir le padding au lieu de la hauteur/largeur.