Contenir une image dans une div ?

Question

Je veux contenir une image dans une div 250 x 250, en forçant l'image à se redimensionner mais pas à s'étirer. Comment puis-je faire cela ? D'ailleurs, l'image sera généralement plus grande que la div elle-même, c'est pourquoi le redimensionnement entre en jeu.

<div id = "container">
  <img src = "whatever" />
</div>

#container { width:250px; height:250px; border:1px solid #000; }

Voici un jsfiddle que quelqu'un peut éditer :

http://jsfiddle.net/rV77g/

Answer 1

object-fit se comporte comme background-size La mise à l'échelle des images permet de résoudre le problème de la mise à l'échelle des images pour qu'elles s'adaptent.

La propriété CSS object-fit spécifie comment le contenu d'un élément remplacé doit être adapté à la boîte établie par sa hauteur et sa largeur utilisées.

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

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

---

Support des navigateurs

Il n'y a pas de support pour IE, et le support pour Edge commence à la v16, seulement pour img élément : https://caniuse.com/#search=object-fit

Les bfred-it/object-fit-images polyfill fonctionne très bien pour moi dans IE11, testé sur Browserstack : démo .

---

Alternative sans polyfill pour l'utilisation d'une image en SVG

Pour Edge pré v16, et ie9, ie10, ie11 :

Vous pouvez recadrer et mettre à l'échelle n'importe quelle image à l'aide de CSS object-fit et object-position . Toutefois, ces propriétés ne sont prises en charge que dans la dernière version de MS Edge ainsi que dans tous les autres navigateurs modernes.

Si vous avez besoin de recadrer et de mettre à l'échelle une image dans Internet Explorer et de fournir un support à IE9, vous pouvez le faire en enveloppant l'image dans une balise <svg> et en utilisant le viewBox et preserveAspectRatio pour faire ce que l'on attend d'eux. object-fit et object-position faire.

http://www.sarasoueidan.com/blog/svg-object-fit/#summary-recap

(L'auteur explique cette technique en détail et il serait impossible de la reproduire ici).

Answer 2

Utiliser la largeur et la hauteur maximales. Le rapport d'aspect sera conservé

#container img 
{
 max-width: 250px;
 max-height: 250px;
}

http://jsfiddle.net/rV77g/

Answer 3

Vous devez styliser l'image comme suit

#container img{width:100%;}

et le conteneur avec débordement caché :

#container{width:250px; height:250px; overflow:hidden; border:1px solid #000;}

Answer 4

Voici le javascript que j'ai écrit pour faire cela.

function ImageTile(parentdiv, imagediv) {
imagediv.style.position = 'absolute';

function load(image) {
    //
    // Reset to auto so that when the load happens it resizes to fit our image and that
    // way we can tell what size our image is. If we don't do that then it uses the last used
    // values to auto-size our image and we don't know what the actual size of the image is.
    //
    imagediv.style.height = "auto";
    imagediv.style.width = "auto";
    imagediv.style.top = 0;
    imagediv.style.left = 0;

    imagediv.src = image;
}

//bind load event (need to wait for it to finish loading the image)
imagediv.onload = function() {
    var vpWidth = parentdiv.clientWidth;
    var vpHeight = parentdiv.clientHeight;
    var imgWidth = this.clientWidth;
    var imgHeight = this.clientHeight;

    if (imgHeight > imgWidth) {
        this.style.height = vpHeight + 'px';
        var width = ((imgWidth/imgHeight) * vpHeight);
        this.style.width = width + 'px';
        this.style.left = ((vpWidth - width)/2) + 'px';
    } else {
        this.style.width = vpWidth + 'px';
        var height = ((imgHeight/imgWidth) * vpWidth);
        this.style.height = height + 'px';
        this.style.top = ((vpHeight - height)/2) + 'px';
    }
};

return {
    "load": load
};

}

Pour l'utiliser, il suffit de procéder comme suit :

 var tile1 = ImageTile(document.documentElement, document.getElementById("tile1"));
 tile1.load(url);

Je l'utilise pour un diaporama dans lequel j'ai deux de ces "tuiles" et j'en fais disparaître une en fondu et l'autre en fondu. Le chargement est effectué sur la "tuile" qui n'est pas visible afin d'éviter l'effet visuel déstabilisant de la réinitialisation du style à "auto".

Answer 5

Puisque vous ne voulez pas d'étirement (toutes les autres réponses l'ignorent), vous pouvez simplement définir la largeur et la hauteur maximales, comme dans le cas suivant jsFiddle edit .

#container img {
    max-height: 250px;
    max-width: 250px;
} 

Voir mon exemple avec une image qui n'est pas carrée, elle ne s'étire pas