Я добавил это, но это просто делает его выпадать внизу ... Я пробовал Object-fit - но это ничего не делает

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

Я не знаю как:

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

сохраняйте ширину фотографии на уровне 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>

 BrandonW07 сент. 2017 г., 16:24
Я не думаю, что то, что вы пытаетесь достичь, можно сделать с помощью сетки.

Ответы на вопрос(2)

Решение Вопроса

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

Ваш код:

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

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

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

JSFiddle demo

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

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

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

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

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

Вот что произойдет, если вы дадитеauto стоимость:JSFiddle demo

 martin08 сент. 2017 г., 09:25
Спасибо за ваше руководство. Первая проблема / решение решило мою головную боль! Вы правы насчет второй части. Я решу это, настроив разные макеты для 3-х медиа-макетов, с которыми я работаю (мобильный, планшет, ноутбук). Я полностью понимаю вашу точку зрения :-)

фоновая картинка внутри одной из ячеек сетки, а не тега IMG (еще не использовал display: grid пока нет, потому что он такой новый - круто!)

Затем с помощьюфон-размер а такжефон положениеВы можете правильно определить его размер в этой ячейке.

.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>

Ваш ответ на вопрос