Управление размером изображения в макете CSS Grid

У меня есть CSS сетка с кучей областей и контейнером с фотографиями.

Я не знаю как:

  1. контролировать размер фотографии, чтобы она находилась в пределах сетки

  2. сохраняйте ширину фотографии на уровне 100% (таким образом, равную его контейнеру) и масштабируйте высоту контейнера, чтобы соответствовать фотографии. В основном, когда окно становится меньше, ширина фотографии становится меньше, как и высота - растягивая тег, альбом и поворачивая элементы вверх.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas: 
    "info    photo photo photo   photo" 
    "comment photo photo photo   photo" 
    "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
}

.photo>img {
  object-fit: cover;
  width: 100%
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}
<div class="container">
  <div class="photo">
    <img src="http://wallpaper-gallery.net/images/image/image-13.jpg" />
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>

ОТВЕТЫ

Ответ 1

У вас есть две разные проблемы здесь.

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

Ваш код:

.photo > img {
  object-fit: cover;
  width: 100%;
}

Вам просто нужно было указать максимальную высоту изображения, чтобы оно не могло переполнить контейнер:

.photo > img {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

Демонстрация JSFiddle

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

Это не проблема, связанная с изображением. Фактически, вы можете полностью удалить изображение, пытаясь решить эту проблему.

Это проблема динамического определения размера элемента сетки (контейнера изображения). Почему этот элемент сетки изменяет размер по отношению к размеру изображения, если его размер контролируется grid-template-columns и grid-template-rows?

Кроме того, почему нижний ряд элементов сетки (tag, album, rotate) следует за контейнером изображения вверх или вниз? Им придется покинуть свой ряд.

Масштабирование всего контейнера сетки не будет проблемой. Но кажется, что вы хотите масштабировать только один элемент сетки (контейнер изображений). Это сложно. Возможно, вы просматриваете дополнительные контейнеры, значения auto для длины и, возможно, сценарии.

Вот что происходит, если вы присваиваете строкам изображения значение auto: JSFiddle demo

Ответ 2

Что делать, если вы используете фоновое изображение внутри одной из ячеек сетки, а не тег IMG (не использовали display: grid, но b/c это так новое - круто!)

Затем, используя background-size и background-position, вы можете правильно настроить его в этой ячейке.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 40vh 30vh 30vh;
  grid-gap: 10px;
  grid-template-areas: "info    photo photo photo   photo" "comment photo photo photo   photo" "comment tag     tag   album rotate"
}

.photo {
  grid-area: photo;
  background: yellow;
  height: 100%;
  background-size: cover; /* <-- background size */
  background-position: center; /* <-- background position */
}

.info {
  grid-area: info;
  background: pink;
}

.tag {
  grid-area: tag;
  background: teal;
}

.comment {
  grid-area: comment;
  background: green;
}

.album {
  grid-area: album;
  background: red;
}

.rotate {
  grid-area: rotate;
  background: blue;
}
<div class="container">
  <div class="photo" style="background-image: url('https://thumbs.web.sapo.io/?epic=YmIzAEUIMb3pue+Zz8qV8QS/WuKmq0vrL/lWiluSn7SstKeeh7/UTTBAuDlhHFD6YC9+vaCHBQuNOXeVaHkjzTSE8tF3hMBev6512ha92Yc4kRw=&W=1200&H=627&crop=center&delay_optim=1')">
  </div>
  <div class="info">info</div>
  <div class="tag">tag</div>
  <div class="comment">comment</div>
  <div class="album">album</div>
  <div class="rotate">rotate</div>
</div>

Ответ 3

У меня есть небольшая коррекция, которая работает для любой комбинации соотношения сторон ячейки css-grid и src img. (Поскольку принятое решение работает только в том случае, если соотношение сторон ячейки больше, чем соотношение сторон изображения). Это очень просто:

.photo > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

Ответ 4

Вероятно, вам нужно добавить явную ширину: 100% к изображению

Ответ 5

лол это сработало?

Мне нужно 30 так EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE