Ik heb een div van 48x48 en daarbinnen staat een img element, ik wil het in de div passen zonder een deel te verliezen, ondertussen blijft de verhouding behouden, is dit haalbaar met html en css?
U zult wat JavaScript nodig hebben om bijsnijden te voorkomen als u de afmeting van de afbeelding niet weet op het moment dat u de css schrijft.
<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%;
}
Als u een JavaScript-bibliotheek gebruikt, wilt u daar misschien gebruik van maken.
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
Dit zorgt ervoor dat de afbeelding uitzet om zijn parent te vullen, waarvan de grootte is ingesteld in de div
CSS.