Problemy z obrazami zmieniającymi rozmiar - html, css, html5, css3

Oto mój CSS, który mam dla mojej składni img. Powinna jednak reagować na zmiany rozmiaru podczas zmiany rozmiaru przeglądarki. Działa to w Chrome, ale IE i FIREFOX z jakiegoś powodu nie działają - czy istnieje powód? Używam najnowszej ze wszystkich.

img {
max-width: 100%;
height: auto;
width: auto9; /* ie8 */
}

Odpowiedzi:

Maksymalna szerokość img: 100% to dobra technika dla responsywnych obrazów, ale musi współpracować z kontenerem obrazu - elementem, który trzyma obraz / otacza go - abyś mógł zobaczyć jego reakcję w akcji.

Spróbuj tego, a powinieneś go uruchomić w różnych przeglądarkach:

<div class="imgHolder">
<img src="/images/http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>

Twój obraz jest zawinięty w div. A CSS to:

.imgHolder{
width: 100%;
max-width: 1000px;
padding: 10px;
border: 3px dashed red;
margin: 10px auto;
}

.imgHolder img {
max-width: 100%
}

Możesz sprawdzić numer kodowy tutaj