Сасс. Изображения выше контейнера, когда ширина указана в процентах, а высота не указана - PullRequest
Новая
       70

Сасс. Изображения выше контейнера, когда ширина указана в процентах, а высота не указана

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

Изображения выше контейнера. Я хочу, чтобы они были внутри своего контейнера. Вот кодекс ручки: https://codepen.io/loganlee/pen/RwNmGJb?editors=1100

enter image description here

enter image description here

Вы можете Из изображений видно, что изображения переполняют свой контейнер по вертикали. 

.composition
{
  position: relative;

  &:hover &__photo:not(:hover)
  {
    transform: scale(1.1);
  }

  &__photo
  {
    width: 55%;
    position: absolute;
    outline-offset: 1rem;
    transition: all .2s;

    &:hover
    {
      outline: 1.5rem solid greenyellow;
      transform: scale(1.01) translateY(-1rem);
      z-index: 20;

      @media only screen and (max-width: 900px)
      {
        transform: scale(1.31) translateY(-1rem);
      }
    }

    @media only screen and (max-width: 900px)
    {
      width: 33.333%;
    }

    &--p1
    {
      top: -3rem;
      @media only screen and (max-width: 900px)
      {
        transform: scale(1.2);
      }
    }
    &--p2
    {
      top: 3rem;
      right: 0;
      @media only screen and (max-width: 900px)
      {
        transform: scale(1.3);
        top: 0;
      }
    }
    &--p3
    { 
      right: 20%;
      @media only screen and (max-width: 900px)
      {
        transform: scale(1.1);
        top: 2rem;
        right: 30%;
      }
    }

  }
}

Вы можете видеть, что & ___ photo установлены шириной 55% от .composition, а когда экран меньше 900px, ширина установлена ​​равной 33,333. %. Но фотографии игнорируют контейнер .composition и увеличиваются даже больше, чем .section-about.

Если я это сделаю: 

&__photo
{
   width: 55%;
   max-height: 100%;
}

Изображения затем исчезают совсем.

Если a на & ___ фото установлена ​​фиксированная высота, фотографии изменяются и помещаются внутри контейнера. 

&__photo
{
   width: 55%;
   height: 100px;
}

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

Мне просто нужен совет специалиста по наилучшей практике.

Спасибо.

(Я думаю, что Я должен сделать изображения меньше, чем justify-content: центрируйте их) 

.composition
{
  display: flex;
  justify-content: center;
  ...
  &__photo
  {
    height: 20rem;
    ...
  }
}

Но все же изображения вторгаются в нижнюю часть родительского контейнера.

...