🥇 Compreendendo a largura da imagem

Nós sabemos isso

foo { width: 100%; }

significa que o elemento foo terá 100% de largura, em relação à largura do pai.

E se eu tiver uma imagem com largura máxima e largura especificada?

Será usado aquele definido em css. É um pouco diferente com o css embutido padrão, onde o estilo definido no atributo “estilo” será carregado primeiro.

HTML:

<h1>To see the result, please resize the result window width</h1>

<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" width="400px" />

<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" width="400px" class="mw" />

<img src="http://lorempixel.com/400/200/sports/1/Dummy-Text" width="400px" class="w" />

CSS:

.mw {
    max-width: 100%;
}

.w {
    width: 200px;
}

Veja este violino: http://jsfiddle.net/mufid/wx7RZ/5/

Related Posts