web-dev-qa-db-fra.com

Contenir une image dans un div?

Je veux contenir une image dans un div 250 x 250, forçant l'image à redimensionner mais pas à s'étirer. Comment puis-je faire ceci? Soit dit en passant, l'image sera généralement plus grande que le div lui-même, c'est pourquoi le redimensionnement apparaît dans l'image.

<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/

cssimage
31
varatis

Utilisez la largeur et la hauteur maximales. Il gardera le rapport d'aspect

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

http://jsfiddle.net/rV77g/

36
Oliver

object-fit, se comporte comme background-size, résolvant le problème de la mise à l'échelle des images vers le haut et vers le bas pour les adapter.

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

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

snapshot of an image rendered with all the object-fit options

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

Prise en charge du navigateur

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

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

Alternative sans polyfill utilisant une image en SVG

Pour Edge pre 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. Cependant, 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 une assistance à IE9, vous pouvez le faire en encapsulant l'image dans un et en utilisant les attributs viewBox et preserveAspectRatio pour faire quoi object-fit et object-position faire.

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

(L'auteur explique la technique à fond, et reproduire les détails ici ne serait pas pratique.)

34
ptim

Vous devez styliser l'image comme ceci

#container img{width:100%;}

et le conteneur avec débordement caché:

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

Voici le javascript que j'ai écrit pour faire exactement 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
};

}

Et pour l'utiliser, faites simplement quelque chose comme ceci:

 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 je fondu l'une et l'autre. Le chargement est effectué sur la "tuile" qui n'est pas visible pour éviter l'effet visuel discordant de la réinitialisation du retournez à "auto".

2
crowmagnumb

Puisque vous ne voulez pas d'étirement (toutes les autres réponses l'ignorent), vous pouvez simplement définir max-width et max-height comme dans mon jsFiddle edit .

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

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

1
MMM