Étirement de l'image miniature de la barre latérale

Question

Comment empêcher mes images de s'étirer dans la barre latérale de Blogger? J'ai essayé beaucoup de différents CSS par exemple:

.container { 
    max-height: 400px; 
    max-width: 400px; 
} 

Les vignettes sont encore tendues et j'ai essayé la propriété overflow:hidden; et qui fonctionne, mais découpe trop de l'image et je préférerais les être redimensionné.

Voici le HTML:

<div id="container"> 
    <img src="http://2.bp.blogspot.com/-THybP4vxGMA/VpwN3LXD-jI/AAAAAAAAAcA/kpZkxwEH9P8/s1600/4afd422d987dac3041f33ffbf34f9367.jpg"/> 
</div> 

Answer 1

Vous devez ajouter max-width: 100% et max-height: 100%; à l'image afin de ne pas déborder le récipient. Vous devez également modifier max-width et max-height dans le #container à width et height. Enfin, vous avez utilisé .container au lieu de #container.

#container { 
 
    height: 400px; 
 
    width: 400px; 
 
} 
 
#container img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
}

<div id="container"><img src="http://2.bp.blogspot.com/-THybP4vxGMA/VpwN3LXD-jI/AAAAAAAAAcA/kpZkxwEH9P8/s1600/4afd422d987dac3041f33ffbf34f9367.jpg"/></div>

Answer 2

J'ai pensé une solution:

#container { 
    width: 150px; 
    height: 150px; 
    display: block; 
    position: relative; 
    overflow: hidden; 
} 

#container img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
}