Ho un div 48x48 e al suo interno c'è un elemento img, voglio inserirlo nel div senza perdere nessuna parte, nel frattempo il rapporto viene mantenuto, è realizzabile usando html e css?
Avrete bisogno di un po' di JavaScript per evitare il ritaglio se non conoscete la dimensione dell'immagine nel momento in cui scrivete il 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%;
}
Se usi una libreria JavaScript, potresti volerne approfittare.
<div>
<img src="something.jpg" alt="" />
</div>
div {
width: 48px;
height: 48px;
}
div img {
display: block;
width: 100%;
}
Questo farà espandere l'immagine per riempire il suo genitore, la cui dimensione è impostata nel CSS div
.