CSS Квадрат в зависимости от роста родителей - PullRequest
Новая
       59

CSS Квадрат в зависимости от роста родителей

0 голосов
/ 18 января 2020

В настоящее время я разрабатываю веб-сайт, на котором у меня будет sh изображение, которое будет составлять 25% от его родительского роста.

Я посмотрел следующие ответы на SO и несколько других подобных ответов на других сайтах :

Проблема с ответами, приведенными выше, заключается в том, что либо используются единицы просмотра порта (vh), либо это соотношение сторон на основе ширины. В моем случае я хотел бы установить элемент на 25% от его родительской высоты. Я пробовал приведенный ниже код, однако он просто устанавливает его ширину на 100%. 

main {
    --main-height: calc(100vh - var(--nav-height) - var(--body-top-padding)); 
    min-height: var(--main-height);
}

section {
    border: 1px solid red;
    width: 100%;
    min-height: calc(var(--main-height) / 2);
}
#profile > img {
    border: 1px solid black;
    height: 25%;
    padding-left: 100%;
}

Здесь #profile - это раздел с идентификатором профиля.

Edit

Вот что я чувствую как хак, чтобы сделать это: 

#profile > img {
    border: 1px solid black;
    --width: calc(0.25 * var(--main-height));
    min-height: var(--width);
    width: var(--width);
}

Есть ли лучший способ, который не использует CSS свойства и вычисления?

1 Ответ

0 голосов
/ 18 января 2020

Согласно приведенным данным, этого должно быть достаточно: 

.parent {
  height: 300px;
  width: 300px;
  border: 1px solid black;
}

.parent img {
  height: 25%;
  width: auto;
}
<div class="parent">
  <img src="https://visualhunt.com/photos/2/cat-feline-cute-domestic-young-looking-curious.jpg?s=s" />
</div>

Хотя, я должен упомянуть несколько CSS ограничений:

  • CSS относительная высота и ширина (%) может быть взятым только из окончательного значения. Это означает, что только если родитель имеет относительную высоту , а не , дочерние элементы могут быть установлены на относительную высоту, и то же самое относится и к ширине.
  • Изменение размера изображения не рекомендуется, поэтому достаточно установить один из атрибутов и пусть другой auto математически исправляет его соотношение.

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

Если высота родительского элемента не определена через CSS, вы можете «взломать» эту функцию с помощью DOM. 

setTimeout(() => {
  let parent = document.getElementById('parent');
  let image = document.querySelector('#parent img');
  
  let parentHeight = parent.offsetHeight;
  image.style.height = (parentHeight / 4) + 'px';
}, 2000);
#parent {
  height: 50%;
  width: 50%;
}

#parent img {
  height: 25%;
  width: auto;
}
<div id="parent">
  <img src="https://visualhunt.com/photos/2/cat-feline-cute-domestic-young-looking-curious.jpg?s=s" />
</div>

Я бы не назвал это идеальным примером, потому что, честно говоря, было сложно моделировать контейнер с неизвестной высотой в этой функции фрагмента - но я сделал это с задержкой через 2 секунды, чтобы пример стал визуальным.

...