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

[Anonymous]

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

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

Do I maybe have to give the container div a percentage height based on the whole page or am I looking at this completely wrong?
Also, do you think CSS backgrounds are the best way to do this? Maybe there's a technique which serves different img tags based on device/screen width. The general idea is that the landing page template will be used numerous times with different product images so I need to make sure I develop this the best way possible.
I apologise is this is a little long-winded but I'm back and forth from this project to the next so I'd like to get this little thing done.


Источник: https://stackoverflow.com/questions/110 ... uto-height