CSS comment étirez-vous pour ajuster et maintenir le ratio d'aspect?

J'ai le code css suivant:

.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}

Qui correspond à ce code HTML:

<div class="mod left"></div>

Il en résulte de ce gâchis:

CSS comment étirez-vous pour ajuster et maintenir le ratio d'aspect?

si je dois utiliser le css3 background-size: 175px 160px; Le ratio d'aspect est vraiment foiré résultant dans un désordre comme ceci:

CSS comment étirez-vous pour ajuster et maintenir le ratio d'aspect?

Est-il une façon d'étirer une image adaptée à la div? Mais dans une manière dont les proportions sont conservées? Je veux un recadrage automatique.

source d'informationauteur JZ.

  1. 30

    Cela devrait fonctionner (dans les navigateurs qui supportent background-size):

    background-size: 175px auto;

    Vous pouvez également essayer:

    background-size: cover;

    Ou:

    background-size: contain;

    Il y a une bonne explication sur le MDC.

  2. 5

    T-il besoin d'être une image de fond?

    img{
width:300px;
height:auto;
}


<img src="your-photo.png">
  3. 1

    Vous pouvez utiliser le background-size propriété avec la contain valeur:

    background-size: contain;

    Voici un exemple:
    https://jsfiddle.net/gusrodriguez/auuk97hf/1/

    Dans l'exemple ci-dessus, le corps a une image redimensionnée à l'arrière-plan. Il ya aussi deux divs avec taille arbitraire, et avec une autre image qui s'adapte et garder le ratio d'aspect.

  4. 1

    Vous pouvez utiliser le CSS Object-fit propriété.

    {
 height: 160px;
 width: 175px;
 object-fit: cover;
}

    Objet d'ajustement peut avoir les valeurs suivantes.

    contenir, de couverture, de remplissage, aucun, à échelle réduite. Veuillez consulter le lien ci-dessus pour plus d'info.