Жидкостное динамическое изображение с центром в div - изменение размера с помощью div немедленно

Question

Итак, у меня есть полностью жидкая веб-страница. Существует родительский DIV с шириной: 100%, а внутри изображения со стилем:

<div> 
    <img src="image.png" alt="" /> 
</div> 

<style> 
    div{ width:100% } 
    img{ 
     display: block; 
     margin: auto; 
     max-width: 100%; 
    } 
</style> 

Изображение находится в центре дел. Я не знаю размер изображения, но он всегда меньше родительского DIV, поэтому есть свободное пространство от границ img до границ div. Теперь, когда вы изменяете размер браузера, изображение не изменяется, пока родительский DIV не достигнет границ изображения.

Если изображение будет иметь ширину стиль: 100%, то она будет простираться за пределы реального размера ...

Я хотел бы это изображение, чтобы масштабировать с DIV сразу же, когда окно браузера изменяется. Если изображение холста будет на 100% от родительского div, поведение будет похоже на то, что я хотел (изображение изменилось бы сразу, потому что изображение будет равно 100% от ширины div). Но я не могу сделать изображение должно быть так ...

Answer 1

Я не думаю, что это возможно с чистым CSS, но вы можете использовать некоторые JQuery - http://jsfiddle.net/UcV7y/

var ratio = $("img").parent().width()/$("img").width(); 

$(window).resize(function() { 
    $("img").width($("img").parent().width()/ratio + "px"); 
}); 
​