Отзывчивый дизайн HTML CSS (NO JS) для контейнера в контейнере ⇐ CSS

[Anonymous]

Я объясню свой случай с помощью визуального примера:
в webApge, < /p>

Существует стандартное текстовое содержимое, а затем < / / li>
В контейнере (.mainbg-container), фоновое изображение телевизора на столе < /li>
Вторичный контейнер (. Secondarybg-container) будет Будьте экраном телевизора, который я хочу оставаться исправленным внутри телевизора, независимо от размера. Таким образом, верхний левый угол и высота ширины всегда будут внутри телевизора, какими бы ни были изменение в точке зрения: небольшой или большой экран, портрет или ландшафт. < /Li>
< /ol>
Идея заключается в том, что позже, с JS, я мог бы изменить вторичный фон контейнеров, чтобы имитировать изменение канала или отобразить какой -то другой внутренний макет. Эта часть выходит за рамки моего вопроса. < /P>
Если возможно, я хотел бы использовать ванильные CSS. Я не против фреймворта (начальная загрузка, попутный ветер ...), но я хотел бы знать, возможно ли это без них. > Использование процента vw /vh для единиц
1)
Использование фонового изображения с фоновым размером: Cover; Чтобы иметь адаптивное изображение с адаптивным изображением defacto < /p>


:root {
--secondary-container-left: 5%;
--secondary-container-top: 6%;
--secondary-container-width: 69%;
--secondary-container-height: 56%;
}

.mainbg-container {
width: 100%;
height: 100vh;
background-image: url("");
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
/* Secondary container positioned absolutely relative to mainbg-container */
.secondarybg-container {
position: absolute;
left: var(--secondary-container-left);
top: var(--secondary-container-top);
width: var(--secondary-container-width);
height: var(--secondary-container-height);
background-image: url("");
background-color: #4CAF50;
background-size: cover;
background-position: center;
z-index: 1;
min-width: 300px;
min-height: 200px;
}< /code>

Some content before


Some other content


Some content after
< /code>
< /div>
< /div>
< /p>
Однако в данном случае, с учетом размера изображения, фонового изображения может быть больше, чем ViewPort, и поэтому не будет полностью замечен. Изображение с фоновым размером: содержать; Чтобы иметь полностью видимое изображение, независимо от того, что это изменить размер. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">:root {
--secondary-container-left: 39%;
--secondary-container-top: 6%;
}

.mainbg-container {
width: 100%;
height: 100vh;
background-image: url("");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
}
/* Secondary container positioned absolutely relative to mainbg-container */
.secondarybg-container {
position: absolute;
left: var(--secondary-container-left);
top: var(--secondary-container-top);
background-image: url("");
background-color: #4CAF50;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
min-width: 128px;
min-height: 90px;
}< /code>

Some content before


Some other content


Some content after
< /code>
< /div>
< /div>
< /p>
Тем не менее, если вы вернетесь с размером просмотра,. не соответствует
Эта проблема кажется несколько простой проблемой, учитывая, что отзывчивость сейчас является стандартом.
Заранее спасибо Редактировать: @paulie-d Я удалил jsfiddle и положил код внутрь. Это имеет смысл.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -container