CODEWITHSUNDEEP
cssgridgallerycss-grid
theexpanse87
theexpanse87

Reputation: 13

CSS grid: this same size of image

I use grid to create gallery.

My images have different size. The simplest way is create container with fixed size and use overflow: hidden.

But I would have width: 100% of columns and I keep the proportions.

It's possible?

Here is my code: https://jsfiddle.net/ua75rcu8/

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

Upvotes: 0

Views: 1832

Answers (2)

sunsetsurf
sunsetsurf

Reputation: 592

FYI: using object-fit: fill; will loose the proportions.
You might want to try: object-fit: cover; to keep the proportions as you asked about in your question.

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

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16261

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

Here you have explain of object-fit :https://css-tricks.com/almanac/properties/o/object-fit/

You can set height as you want (for example I set 150px)

Upvotes: 2

Related Questions