CSS grid: 这张同样大小的图片

Question

我使用网格创建画廊。

我的图像有不同size。最简单的方法是用 fixed size 创建 container 并使用 overflow: hidden.

但我会得到 columns 的 width: 100% 并且我保持比例。

可能吗？

.container {
  width: 90vw;
  margin: 0 auto;
}

@media (max-width: 500px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-content: space-around;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
}

@media (min-width: 500px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: space-around;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
}

@media (min-width: 700px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-content: space-around;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
}

@media (min-width: 900px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-content: space-around;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }
}

img {
  width: 100%;
  height: auto;
}

<div class="container">
  <div class="grid">
    <img src="http://mbfotografia.pl/wp-content/uploads/2015/08/22-Portret-342x515.jpg" alt="portret">
    <img src="http://forum.powiat-piaseczynski.info/konkurs-fotograficzny/portret-konkurs-fotograficzny-grudzien-2012/zdjecie-09-portret-konkurs-fotograficzny.jpg" alt="portret">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRscH_BLgMgp-b8uwxEo5LuaYM7gcXPatSDxIJjG5UL4iLifIE" alt="portret">
    <img src="https://www.tapeciarnia.pl/tapety/normalne/tapeta-czarno-bialy-portret-usmiechnietej-blondynki.jpg" alt="portret">
    <img src="http://malinowska.pl/wp-content/uploads/2016/03/portret-listopad-2015.jpg" alt="portret">
    <img src="http://salimzianowa.com/wp-content/uploads/2017/10/portret-3.jpg" alt="portret">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcvz20Z3dLhCcMClDrgpLQZn1RkBQCcXmK63N1l_BVTFE4KAsZTA" alt="portret">
    <img src="http://www.astrojawil.pl/foto7/kopernik_ptryb_g5.jpg" alt="portret">
    <img src="https://img.webme.com/pic/p/portrety-barbararabiega/tesciowa800.jpg" alt="portret">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTq48L9RN6FJ7UocvJpIqGnyLYaY6O_lrQHhfYa5ZIH3GR8G9Bh" alt="portret">
  </div>
</div>

Answer 1

img {
    width: 100%;
    object-fit: fill;
    height: 150px;
}

这里有object-fit的解释：https://css-tricks.com/almanac/properties/o/object-fit/

height可以任意设置（比如我设置150px）

Answer 2

仅供参考：使用object-fit: fill;会降低比例。
您可能想尝试：object-fit: cover; 保持您在问题中询问的比例。

img{
    width: 100%;
    object-fit: cover;
    height: 150px;
}

CSS grid: 这张同样大小的图片

CSS grid: this same size of image

css

grid

gallery

css-grid