Отзывчивые изображения - Различия в ширине: 100%/ширина: авто

Question

В настоящее время работает на экране посадки, где пользователи выбирают цветную тему на сайте. Есть две цветные стороны, которые «растут» при наведении, что дает эффект раскраски веб-сайта, видимого на макете infront. (Проверьте Codepen ниже, чтобы получить то, что я имею в виду, что это своего рода трудно полностью объяснить)

Demo: http://codepen.io/BAWKdesign/pen/PPvRjz/

К «цвет» макете два изображения используются наложены друг на друга. Он должен быть отзывчивым, поэтому я дал обратный образ width: 100%; height: auto;, который также используется для определения размера родительского div. Верхнее изображение установлено на width: auto; height: 100%;, так как использование ширины 100% заставляет изображение растягиваться, а не клип.

Проблема заключается в том, что наложенное изображение выглядит более крупным, как вы можете видеть на приведенной ниже ссылке, дающей эффект срезанного изображения. Возможно, существуют различия в том, как рассчитывается размер, когда вы меняете 100% и Auto вокруг?

Надеюсь, это просто у меня мозговой пердит, и я где-то совершил ошибку новобранец!

Answer 1

Изображения по умолчанию inline элементы, означающие, что они, естественно, имеют некоторый интервал вокруг них. Вы устанавливаете свои другие изображения на position: absolute, что приводит к тому, что они отображаются аналогично элементу block - т.е. нет интервала по умолчанию.

Простое решение заключается в добавлении display: block к вашему элементу изображения:

.img { 
    display: block; 
} 

Updated CodePen