Как сделать блок, пропорциональный своей высоте?

Question

[skorotkostvolnyy034]

По ширине можно задействовать, например, нижний маргин, задав ему 100%. Есть ли способ сделать то же самое, но отталкиваясь от высоты, а не ширины?

Comments

[Ankhena]

А высота при этом откуда берется?

А еще лучше озвучьте всю истинную задачу.

[skorotkostvolnyy034]

Ankhena, произвольная

[skorotkostvolnyy034]

Ankhena, задача простая: у меня есть блок размером 200x100px, внутри ещё один блок с высотой 100%. Хочу, чтобы второй блок был пропорциональным по высоте и ширине вне зависимости от ширины родителя.

[skorotkostvolnyy034]

Ankhena, мне больше интересовал способ на css, типа нижнего маргина.

[ProjectSoft]

skorotkostvolnyy034, есть свойство aspect-ratio. Вы можете задать нужное вам отношение сторон. Например

.block {
    aspect-ratio: 1 / 1;
}
.wrap {
   aspect-ratio: 16 / 9;
}

[Антон Литвиненко]

позанудствую. не маргин конечно, а паддинг. и необязательно нижний, я например использую верхний)

Answer 1

[cssfish]

1. aspect-ratio хорошо конечно, но поддержка пока не очень.
2. способ с паддингом (т.н. padding hack) действительно работает только отталкиваясь от ширины, а от высоты - не получится.
3. решение - использовать САМЫЙ древний способ - с картинкой :) Ведь картинка имеет ratio, следовательно может "раздвинуть" вложенный блок так, как нам нужно.

Для этого создаем в графическом редакторе ПУСТОЙ файл с нужным соотношением сторон. Например, если нам нужно ratio 1:2, то можно создать файл как размером 1px*2px так и 100px*200px, разница будет только в размере файла (я создал png 1px*2px, размером 76 байт).

Далее делаем разметку

<div class="out">
  <div class="in">
   <img src="test_img.png" alt="">
  </div>
</div>

и стили

.out {
			position: relative;
			width: 200px;
			height: 100px;
			background: #000;
		}
		.in {
			position: absolute;
			top: 0;
			bottom: 0;
			height: 100%;
			right: 10%;
			background: red;
		}
		.in img {
			display: block;
			height: 100%;
			width: auto;
		}

общая идея - в relative внешний блок вкладываем absolute вложенный, растягиваем его по высоте, и как-то его по ширине позиционируем (я использовал right: 10%;. Ширину не указываем - ее сформирует img, который блочный и тоже растянут по высоте (смасштабирован к текущему блоку).

Все, теперь габариты обертки можно менять как угодно, вложенный блок всегда имеет фиксированное соотношение сторон :)

p.s.
- картинку можно потом перевести в data:uri прямо на странице чтоб внешние файлы не грузить
- пробовал еще грузить картинку через псевдоэлемент.in:before { content: url("test_img.png"); } но это не работает - картинка грузится, но не масштабируется как надо.

Возможно, это как-то решается, не знаю.

Comments

[cssfish]

помогло? отметь решением! )