Герой видео и изображения и различные устройства
Я буквально часами пытался подогнать размер моего главного видео под размер экрана компьютера для страницы wordpress. Установка стандартных габаритов все равно как бы натягивает. Теперь я борюсь с изображением героя постера для мобильных устройств. Есть ли CSS, который можно использовать, чтобы ширина изображения соответствовала ширине устройства? Я действительно в моем конце остроумия и хотел бы некоторую помощь!
Ссылка на сайт: http://christap4.sg-host.com
2 ответа
По вашей ссылке это то, что я придумал.
Чтобы получить 100% ширины экрана, вы можете использоватьwidth: 100vw(vw = ширина области просмотра). я также включилascpect-ratio: 1.77777778(ширина видео / высота видео), а затем установите высоту на авто
Похоже, здесь есть пара вещей.
Глядя на ваш вывод, похоже, что вы слишком усложнили решение. Все, что имеет абсолютную позицию с шириной 100%, будет такой же ширины, как и его самый относительный родитель (по умолчанию тело).
Если вы установите ширину на 100%, вы можете установить высоту, используя соотношение сторон ( https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio ). Я не уверен, как далеко вы зашли в поддержку браузера, но это будет охватывать большинство применений.
В качестве альтернативы вы можете задать ему фиксированную высоту и использовать обложку, подходящую для объекта, но это приведет к некоторой обрезке.
Изображение постера просто унаследует те же размеры, что и видео. При этом короткие видеоролики теперь могут воспроизводиться автоматически, если они имеют правильный формат, отключены и имеют правильные атрибуты.