Ich habe ein 48x48 div und darin befindet sich ein img-Element, ich möchte es in das div einpassen, ohne einen Teil zu verlieren, in der Zwischenzeit wird das Verhältnis beibehalten, ist es mit html und css erreichbar?
Sie benötigen etwas JavaScript, um das Beschneiden zu verhindern, wenn Sie die Größe des Bildes zum Zeitpunkt des Schreibens der CSS nicht kennen.
<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%;
}
Wenn Sie eine JavaScript-Bibliothek verwenden, sollten Sie die Vorteile dieser Bibliothek nutzen.
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
Dadurch wird das Bild so erweitert, dass es sein übergeordnetes Element ausfüllt, dessen Größe im CSS für das "div" festgelegt ist.