Жидкие изображения (используя max-width="100%") с помощью Parent на основе px?

Question

Я пытаюсь использовать плавные изображения для адаптивного проекта, над которым я работаю. Тем не менее, все, что я видел, только что подсказало мне установить максимальную ширину для изображений, и это должно работать. Это работает, за исключением ширины контейнера на основе пикселей, как показано здесь: http://codepen.io/anon/pen/cCfsF

Могут ли родители на основе px иметь плавные изображения?

Мой HTML-код:

<div class="container">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
<div class="container2">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>

и мой CSS это:

.container {
  width: 500px;
  background: #f30;
}
.container2 {
   width: 100%; 
    background: #f30;
}
img {
  max-width: 100%;
}

Answer 1

В вашем примере .container имеет фиксированную ширину 500 пикселей, а дочерние изображения имеют ширину 100%, поэтому изображение будет масштабироваться в соответствии с родительским контейнером. Тем не менее, так как .container имеет фиксированную ширину, она не изменится при уменьшении или уменьшении окна.

Как вы заметили, для случая .container2 с шириной в процентах, которая будет соответствовать ширине окна, изображение будет соответственно изменено.

Вы видите правильное поведение, поэтому краткий ответ на ваш вопрос - нет, по крайней мере, для макета, на который вы смотрите.