background image автомасштабирование ширина фиксированная высота

Question

Привет, я хочу всегда подходящее фоновое изображение sceen, а моя индексная страница содержит 2 div, и каждый из них получил определенное фоновое изображение. Объединив эти 2 div фона ima, я получу полную картину (каждый div bg img получил 1/2 этой фотографии). Проблема состоит в том, что соотношение сторон изображения равно 3: 2 (разрешение 1200x800), но background-image: обложка CSS является автоматически масштабируемой и шириной и высотой, поэтому, если у меня есть другое соотношение сторон (например, 16: 9, 4: 3 ...) , полная картина, которая объединена из 2 divs, неверна (неправильная высота из каждого div bg img). Есть ли способ решить эту проблему?

Answer 1

cover - это не единственная опция для background-size. Похоже, что вы должны делать что-то вроде:

background-size:auto 100%; 

который будет задавать фоновые изображения до 100% высоты, но автоматическое определение ширины. Обратите внимание, что вы не ограничены процентами:

background-size:auto 500px; 
background-size:auto 31.25em; 

также будет работать.

MDN has a solid reference for all the options available.