Фоновое изображение шириной 100 % с автоматической высотой. ⇐ Html

[Anonymous]

Сейчас я работаю над мобильной целевой страницей для компании. Это действительно простой макет, но под заголовком есть изображение продукта, ширина которого всегда будет 100% (дизайн показывает, что оно всегда идет от края к краю). В зависимости от ширины экрана высота изображения, очевидно, будет соответствующим образом регулироваться. Первоначально я сделал это с помощью img (с шириной CSS 100%), и это сработало отлично, но я понял, что хочу использовать медиа-запросы для обслуживания разных изображений на основе разных разрешений - скажем, небольшого, среднего и например, большую версию того же изображения. Я знаю, что нельзя изменить img src с помощью CSS, поэтому я решил использовать CSS-фон для изображения, а не тег img в HTML.
Я не могу похоже, это работает правильно, поскольку для отображения фона div с фоновым изображением требуется как ширина, так и высота. Очевидно, я могу использовать «ширину: 100%», но что мне использовать для высоты? Я могу установить случайную фиксированную высоту, например 150 пикселей, и тогда я смогу видеть верхние 150 пикселей изображения, но это не решение, поскольку фиксированной высоты не существует. Я поиграл и обнаружил, что как только есть высота (проверено на 150 пикселей), я могу использовать «размер фона: 100%», чтобы правильно разместить изображение в div. Для этого проекта я могу использовать более позднюю версию CSS3, поскольку она предназначена исключительно для мобильных устройств.
Ниже я добавил примерный пример. Извините, пожалуйста, за встроенные стили, но я хотел привести простой пример, чтобы прояснить мой вопрос.

Код: Выделить всё

Может быть, мне придется указать контейнеру div процентную высоту в зависимости от всей страницы или я смотрю на это совершенно неправильно?
Кроме того, Как вы думаете, фоны CSS — лучший способ сделать это? Возможно, есть метод, который обслуживает разные теги img в зависимости от ширины устройства/экрана. Общая идея заключается в том, что шаблон целевой страницы будет использоваться множество раз с разными изображениями продуктов, поэтому мне нужно убедиться, что я разработал его наилучшим образом.
Прошу прощения, это немного. многословно, но я то и дело перехожу от одного проекта к другому, поэтому мне бы хотелось закончить эту маленькую вещь.

Подробнее здесь: https://stackoverflow.com/questions/110 ... uto-height