Faire une image de remplissage div complètement sans l'étirer

Redimensionnement automatique des Images pour les Adapter à un Div - Rendre le Travail CSS

Ici est une façon de le faire, démarrer avec le code HTML suivant:

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

et le CSS:

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

et la démo de violon: http://jsfiddle.net/audetwebdesign/QEpJH/

Lorsque vous avez une image orientée comme un portrait, vous avez besoin à l'échelle de la largeur à 100%. A l'inverse, lorsque l'image est paysage orientée, vous avez besoin à l'échelle de la hauteur.

Malheureusement, il n'y a pas de combinaison de sélecteurs CSS qui cible le ratio d'aspect de l'image, de sorte que vous ne pouvez pas utiliser les CSS pour choisir le bon de mise à l'échelle.

En outre, vous n'avez pas de moyen facile de centrage de l'image depuis le coin supérieur gauche de l'image est épinglé en haut à gauche du bloc contenant.

jQuery Helper

Vous pouvez utiliser les éléments suivants jQuery action pour déterminer à quelle classe définir en fonction des
sur le ratio d'aspect de l'image.

$(".container").each(function(){
    //Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    //Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

Pour chaque image dans .container, obtenir la hauteur et la largeur, de tester si width<height et puis définissez la catégorie appropriée.

Aussi, j'ai ajouté une case à prendre en compte le rapport d'aspect du bloc contenant.
Avant, j'avais supposé un carré de panneau d'affichage.

Prendre la ligne: max-width:100% dans votre fichier CSS semble faire l'affaire.

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

Vous pouvez également ajouter > votre la fermeture de div dans votre fichier HTML peut rendre le code plus lisible.

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

Ici est un travail JSFiddle lien: http://jsfiddle.net/HsE6H/19/

Vous devriez essayer ceci:

img {
    min-width:100%;
    min-height:100%;
}

Il fonctionne si vous ajoutez ce qui suit à la div parent pour img style;
https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

Nous sommes allés sur le chemin d'un rapporteur d'angle d'application de l'aide d'une variation sur le jQuery approche ci-dessus. Puis, un de nos brillants collègues est venu avec un pur CSS approche. Voir cet exemple ici: https://jsfiddle.net/jeffturner/yrrncees/1/.

Essentiellement à l'aide de la hauteur de la ligne a résolu le problème pour nous. Pour ceux qui ne veulent pas de frapper le violon, les fragments de code sont:

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

La clé est dans l'utilisation de la hauteur de la ligne et de configuration du conteneur à faire de même.

Utilisation d'une image comme Div fond a de nombreux inconvénients (manque de ALT pour le RÉFÉRENCEMENT). Au lieu de cela, utilisez object-fit: cover; dans la balise d'image style!

La solution suivante est très court et nettoyez-les si vous avez besoin d'insérer la balise img dans la balise div:

CSS:

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}

HTML:

Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>

<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>

Aussi, si vous n'avez pas besoin d'utiliser un div, vous pouvez simplement écrire un encore plus courte css:

 img
    {
        max-height: 300px;
        max-width: 240px;
    }