Comment puis-je insérer une image (img) à l'intérieur d'un div et de garder le ratio d'aspect?

Question

J'ai un 48x48 div et à l'intérieur il ya un élément img, je veux l'insérer dans la div sans perdre une partie, dans le temps, le ratio est maintenu, est-il réalisable à l'aide de html et css?

Answer 1

Utiliser max-height:100%; max-width:100%; de l'image à l'intérieur de la div.

Answer 2

Vous aurez besoin de JavaScript pour empêcher le recadrage si vous ne connaissez pas la dimension de l'image à la fois que vous êtes en train de rédiger la feuille de style css.

HTML et JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Si vous utilisez une Bibliothèque JavaScript vous pouvez prendre avantage de cela.

Answer 3

À l'aide de CSS:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

Answer 4

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Cela va rendre l'image s'étendre à remplir ses parents, dont sa taille est définie dans l' div CSS.