J'ai un div 48x48 et à l'intérieur de celui-ci il y a un élément img, je veux le faire rentrer dans le div sans perdre aucune partie, dans le même temps le ratio est conservé, est-ce réalisable en utilisant html et css ?
Vous aurez besoin de JavaScript pour empêcher le recadrage si vous ne connaissez pas la dimension de l'image au moment où vous écrivez le CSS.
<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>
#container {
width: 48px;
height: 48px;
}
#container img {
width: 100%;
}
Si vous utilisez une bibliothèque JavaScript, vous pouvez en tirer parti.
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
L'image s'agrandira pour remplir son parent, dont la taille est définie dans le CSS div
.