Я объясню свой случай с помощью визуального примера:
в webApge, < /p>
Существует стандартное текстовое содержимое, а затем < / / li>
В контейнере (.mainbg-container), фоновое изображение телевизора на столе < /li>
Вторичный контейнер (. Secondarybg-container) будет Будьте экраном телевизора, который я хочу оставаться исправленным внутри телевизора, независимо от размера. Таким образом, верхний левый угол и высота ширины всегда будут внутри телевизора, какими бы ни были изменение в точке зрения: небольшой или большой экран, портрет или ландшафт. < /Li>
< /ol>
Идея заключается в том, что позже, с JS, я мог бы изменить вторичный фон контейнеров, чтобы имитировать изменение канала или отобразить какой -то другой внутренний макет. Эта часть выходит за рамки моего вопроса. < /P>
Если возможно, я хотел бы использовать ванильные CSS. Я не против фреймворта (начальная загрузка, попутный ветер ...), но я хотел бы знать, возможно ли это без них.
Основная идея макета HTML будет < Br />
Some content
Some other content
< /code>
В CSS я попробовал несколько аппаратов:
Использование процента vw /vh для единиц
1)
Использование фонового изображения с фоновым размером : крышка; Чтобы иметь адаптивное изображение с адаптационным изображением < /p>
демо с обложкой < /p>
Однако в этом случае, учитывая размер изображения, фон-изображение может быть больше чем просмотр и поэтому не будет полностью замечен. -Size: содержать; Чтобы иметь полностью видимое изображение, независимо от того, что изменит размер. -container не соответствует
Эта проблема кажется несколько простой проблемой, учитывая, что отзывчивость сейчас является стандартом.
Спасибо заранее
Подробнее здесь: https://stackoverflow.com/questions/794 ... -container
