Comment étirer une image pour remplir une <div> tout en conservant le format de l'image ?

Question

Je dois faire en sorte que cette image s'étire jusqu'à la taille maximale possible sans déborder de son cadre. <div> ou de biaiser l'image.

Je ne peux pas prédire le rapport hauteur/largeur de l'image, il n'y a donc aucun moyen de savoir s'il faut l'utiliser :

<img src="url" style="width: 100%;">

o

<img src="url" style="height: 100%;">

Je ne peux pas utiliser les deux (c'est-à-dire style="width : 100% ; height : 100% ;") parce que cela étirerait l'image pour qu'elle s'adapte à la taille de l'écran. <div> .

En <div> a une taille fixée en pourcentage de l'écran, ce qui est également imprévisible.

Answer 1

Grâce à CSS3

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE et EDGE ont toujours été des outsiders : http://caniuse.com/#feat=object-fit

Answer 2

C'est impossible avec HTML et CSS, ou du moins très exotique et compliqué. Si vous êtes prêt à utiliser un peu de javascript, voici une solution utilisant jQuery :

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

Cela permet de redimensionner l'image de manière à ce qu'elle tienne toujours à l'intérieur de l'élément parent, quelle que soit sa taille. Et comme elle est liée à l'élément $(window).resize() lorsque l'utilisateur redimensionne la fenêtre, l'image s'ajuste.

Cette méthode n'essaie pas de centrer l'image dans le conteneur, ce qui serait possible mais je suppose que ce n'est pas ce que vous recherchez.

Answer 3

Vous pouvez utiliser object-fit: cover; sur la div parente.

https://css-tricks.com/almanac/properties/o/object-fit/

Answer 4

Si vous souhaitez définir une largeur ou une hauteur maximale (afin que l'image ne soit pas très grande) tout en conservant le rapport hauteur/largeur de l'image, vous pouvez le faire :

img{
   object-fit: contain;
   max-height: 70px;
}

Answer 5

Définir la largeur et la hauteur de la partie extérieure container div. Utilisez ensuite le style ci-dessous sur img :

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

Cela vous permettra de conserver le rapport hauteur/largeur de votre img