Фоновое изображение шириной 100% с высотой «авто»

В настоящее время я работаю над мобильной целевой страницей для компании. Это действительно базовый макет, но под заголовком находится изображение продукта, ширина которого всегда будет равна 100% (дизайн показывает, что он всегда идет от края к краю). В зависимости от ширины экрана высота изображения, очевидно, будет соответствующим образом корректироваться. Первоначально я делал это с помощью img (с шириной CSS 100%), и это прекрасно работало, но я понял, что хочу использовать медиа-запросы для обслуживания разных изображений на основе разных разрешений - скажем, небольшой, средняя и большая версия одного и того же изображения, например. Я знаю, что вы не можете изменить img src с помощью CSS, поэтому я решил, что мне следует использовать CSS-фон для изображения, а не тег img в HTML.

Кажется, я не могу заставить это работать должным образом, так как div с фоновым изображением требует ширину и высоту для отображения фона. Я, очевидно, могу использовать «ширина: 100%» но что я использую для высоты? Я могу установить произвольную фиксированную высоту, например 150 пикселей, и затем я смогу увидеть верхние 150 пикселей изображения, но это не является решением, поскольку нет фиксированной высоты. У меня была игра, и я обнаружил, что когда есть высота (протестировано с 150px), я могу использовать «background-size: 100%». правильно разместить изображение в div. Я могу использовать более позднюю версию CSS3 для этого проекта, поскольку он нацелен исключительно на мобильные устройства.

Я добавил грубый пример ниже. Прошу прощения за встроенные стили, но я хотел привести простой пример, чтобы попытаться прояснить мой вопрос.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Должен ли я указывать размер контейнера в процентах от высоты всей страницы или я смотрю на это совершенно неправильно?

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

Я прошу прощения за то, что это немного затянуто, но я возвращаюсь от этого проекта к следующему, поэтому я хотел бы, чтобы эта маленькая вещь была сделана. Заранее благодарим за ваше время, это очень ценится. С уважением

Ответы на вопрос(8)

Ваш ответ на вопрос