text 下载лементапропорциональноширине

Posted 2021-05-01

HTML
<div class="responsive-box">
	<div class="content">Какой-то текст...</div>
</div>

Нам нужно создать два блочных элемента, содержимое размещаем внутри второго блока (в нашем случае это блок с классом .content).
Если никакого текста там не планируется размещать, то тогда оставляем блок пустым. Ниже я покажу, как для этого блока можно задавать фон, который будет растягиваться в зависимости от размеров блока.
Затем добавим CSS.

CSS
.responsive-box {
	position: relative;
	width: 30%; /* Произвольная ширина, которая требуется для блока */
}
.responsive-box::before {
	content: "";
	display: block;
	padding-top: 100%; /* С помощью этого padding мы задаем высоту равную ширине блока */
}
.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(images/bg.jpg) no-repeat center center; /* Задаем фон, если требуется */
    background-size: cover; /* Растягиваем фон под размеры блока, если требуется */
}

Как видите, для блока .content, мы можем смело задавать какой-то фон и этот фон также будет растягивать в зависимости от размеров блока.