48x48 bir divim var ve içinde bir img elementi var, herhangi bir parçayı kaybetmeden div içine sığdırmak istiyorum, bu arada oran korunuyor, html ve css kullanarak başarılabilir mi?
Css'yi yazarken resmin boyutunu bilmiyorsanız kırpmayı önlemek için bazı JavaScript'lere ihtiyacınız olacaktır.
<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%;
}
Eğer bir JavaScript Kütüphanesi kullanıyorsanız, bundan faydalanmak isteyebilirsiniz.
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
Bu, görüntünün, boyutu div
CSS'sinde ayarlanan üst öğesini dolduracak şekilde genişlemesini sağlar.