9
votes

Ajuster l'image à l'intérieur de la div sans étirement

J'ai besoin d'adapter une image à l'intérieur d'un 300x300 div sans étirer l'image. J'ai vu cela sur le poteau Huff, le curseur sur cette page:

http://www.huffingtonpost.com/2012/ 01/07 / Katy-Perry-Divorce_n_1191806.html
Les images sont coupées mais non étirées. Au lieu d'utiliser max-largeur, max-hauteur.
Comment puis-je faire cela?

html css image

2 commentaires

Définissez l'image comme l'image de fond de la DIV?

Stackoverflow.com/a/41895887/1400943 Voici une solution CSS uniquement.

3 Réponses :

19
votes

Ces images sur le site que vous avez liées sont la taille réelle. La réponse simple est donc de redimensionner l'image.

Vous ne pouvez pas vraiment faire cela sans "étirer" l'image si l'image se trouve être inférieure à celle de l'image. 300px large ou de grande taille, mais vous pouvez le faire sans changer le rapport, ce que je pense que vous pensez que vous voulez dire. P>

Voici l'idée de base: p>

div {
    width:300px;
    height:300px;    
    overflow:hidden;
    position:relative;
}
div img {
    position:absolute;
}

5 commentaires

Je pense que c'est ce dont j'ai besoin, je vais l'essayer. brb

Excellent. Bienvenue sur le site! À un de ces quatre.

@Wesleymburch Je vois que les images sont plus grandes que la div. Si l'image est plus petite que la DIV, il existe un moyen de l'étendre sans streching (perdant de la qualité) de l'image

Non, il n'y a aucun moyen d'augmenter la résolution d'une image. Si c'est petit, il n'y a rien que vous puissiez faire mais étirer.

Que diriez-vous de cela: Stackoverflow.com/questions/26553763/... . Je veux que l'image prenne la forme de son conteneur soit réactif.

6
votes

Utilisez la solution Flex Box

Voici le HTML, P>

div{
   width:100%;
    height:250px;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
div img{
  flex-shrink:0;
    -webkit-flex-shrink: 0;
    max-width:70%;
    max-height:90%;
}

1 commentaires

La solution Flexbox ci-dessus fonctionne bien mais ne sera pas à l'échelle de l'image (l'agrandir pour s'adapter). Il semble que l'image de l'image de ce que j'ai vécu.

4
votes

Un moyen simple de faire cela .... xxx

}

1 commentaires

Fantastique! Vous avez sauvé ma journée.