Как с css сделать высоту блока равной его ширине при том что точное значение ширины не известно?

@4234 · Регистрация: 18.01.2017

Author24 — интернет-сервис помощи студентам

Ширина блока задана как "width: 100%", то есть 100% от родительского блока. Как задать высоту блока в процентах не от родителя а от своей же ширины?

@freshxmp3 · 02.11.2018, 09:56

Вот пример(если я правильно понял):

HTML5

1
2
3

<div class="wrapper">
    <div class="block"></div>
</div>

CSS

.wrapper{
    width: 500px;
}
.block {
  width: 100%;
  background: red;
  padding-top: 50%;
  padding-bottom: 50%;
}

@fol · 02.11.2018, 10:21

HTML5

<div class="wrapper">
  <div class="block">
    <div class="inner">
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus explicabo architecto hic, repellat adipisci facere asperiores, soluta commodi consequuntur voluptatibus, sequi minus ullam inventore, pariatur ipsam velit nostrum voluptates! Error!</div>
    </div>
  </div>
</div>

CSS

.wrapper{
  max-width: 600px;
}
.block {
    width: 100%;
    background:green;
    outline: 3px solid black;
}
.inner {
    position: relative;
    height: 0;
    border: none;
    padding-top: 50%;
}
.content {
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: orange;
}

@4234 1 / 1 / 0 Регистрация: 18.01.2017 Сообщений: 181
		1
	Как с css сделать высоту блока равной его ширине при том что точное значение ширины не известно? 02.11.2018, 08:55. Показов 8118. Ответов 2 Метки нет (Все метки) Ширина блока задана как "width: 100%", то есть 100% от родительского блока. Как задать высоту блока в процентах не от родителя а от своей же ширины? 0

	02.11.2018, 10:21