CSS: автоматически вычислять высоту элемента в соответствии с фоновым изображением

Я хочу, чтобы раздел моего сайта (баннера) представлял собой изображение, которое соответствует всей ширине, и чтобы изображение всегда сохраняло полную ширину (не ширину в пикселях, а в процентах). Меня не волнует высота, слишком низкая, мне нужно, чтобы изображение всегда показывало всю ширину содержимого и высоту, чтобы быть автоматически.

я использую background-size: contain и это сохраняет полную ширину изображения, но высоту необходимо рассчитать, потому что тогда высота контейнера будет выше, чем у изображения. Я пытался использовать единицы просмотра, но это не соответствует разным разрешениям (возможно, я делаю это неправильно, но значение для более высокого разрешения не работает для более низкого).

Как бы я сделал это отзывчивым?

Разметка:

<body>
    <section class="feat-bottom">
        <h4>some title</h4>
    </section>
</body>

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

Будет ли этот подход совместим с планшетами и телефонами? Должен ли я использовать второе изображение, оптимизированное для этих случаев?

Источник

1 ответ

Решение

Чтобы вычислить высоту элемента, я использую формулу, которая вычисляет высоту, сохраняя соотношение сторон:

New height = New width / (Original width / Original height)

Так что перевод этого в css дает:

section.feat-bottom {
    height: calc(100vw / (1920px / 800px))
}

Этот подход обеспечивает плавное масштабирование, поэтому не требуется точек останова.

Источник
Другие вопросы по тегам