CSS реализует адаптивный прямоугольник с соотношением ширины и высоты

поисковый движок CSS

Обзор

Сегодня столкнулся с интересным вопросом:"Как реализовать прямоугольник, ширина которого адаптивна, а высота равна половине ширины".

После просеивания поисковых систем и собственных проб и ошибок я обнаружил, что с помощьюpadding-bottomявляется идеальным решением.

решение

Сначала мы должны понять,padding-top/bottomа такжеmargin-top/bottomрассчитываются относительно ширины родительского элемента, мы можем использовать это свойство для достижения наших целей.

код показывает, как показано ниже:

<div class="scale"></div>

.scale {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}

Ключевым моментом этого является то, чтоheight: 0;а такжеpadding-bottom: 50%;.

Мы устанавливаем высоту элемента с помощьюpaddingраспространяться, потому чтоpaddingОн рассчитывается в соответствии с шириной родительского элемента, поэтому высота становится относительной шириной родительского элемента.heightУстановите на 0, чтобы полностью задать высоту элемента.paddingБыть ответственным за.

наконецpadding-bottomЗначение установлено наwidthполовина значения, вы можете добиться высоты половины ширины и адаптивности.

Улучшать

Недостаточно написать так, потому что элементheightЕсли он равен 0, высота не может быть установлена ​​нормально, когда в элементе есть дочерние элементы. Поэтому нам нужно использоватьposition: absolute;. код показывает, как показано ниже:

<div class="scale">
    <div class="item">
        这里是所有子元素的容器
    </div>
</div>

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative; //
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute; //
}

продолжать улучшать

Решил проблему с дочерними элементами, теперь давайте посмотрим на сам элемент. Поскольку нашим первоначальным требованием является соотношение сторон2:1, этого лучше добиться, но тогда спрос захочет16:9соотношение сторон, а ширина не 100%, то рассчитывайте такpadding-bottomБыло хлопотно, когда. Как это решить?

В это время нам нужно установить другой родительский элемент во внешнем слое и передать управление шириной этому родительскому элементу.

код показывает, как показано ниже:

<body>
    <div class="box">
        <div class="scale">
            <div class="item">
                item
            </div>
        </div>
    </div>
</body>

/* box 用来控制宽度 */
.box {
  width: 80%;
}
/* scale 用来实现宽高等比例 */
.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}
/* item 用来放置全部的子元素 */
.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

Таким образом, это может быть решено идеально.

онлайн демо

В этой статье используетсяmdniceнабор текста

Категории