How do I make my image fit the entire container?

Question

I am building a simple gallery using Javascript and CSS but can't seem to get the image to fit full frame. Here is what it looks like right now:

body {
  margin: 5em;
}
h1 {
  text-align: center;
  font-size: 5em;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.gallery > .image-container {
  flex: 1 1 22%;
  margin: 1em;

  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
}

 <div class="container">
      <h1>Gallery</h1>
      <div class="gallery">
        <div class="image-container">
          <input type="checkbox" id="zoomCheck" />
          <label for="zoomCheck">
            <img
              src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-      0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;s=493802e93ec426171750ac2291e2867e"
              id="F8QDoWjZnsA"
            />
          </label>
        </div>
        <div class="image-container">
          <input type="checkbox" id="zoomCheck" />
          <label for="zoomCheck">
            <img
              src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;s=493802e93ec426171750ac2291e2867e"
              id="F8QDoWjZnsA"
            />
          </label>
        </div>
        <div class="image-container">
          <input type="checkbox" id="zoomCheck" />
          <label for="zoomCheck">
            <img
              src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;s=493802e93ec426171750ac2291e2867e"
              id="F8QDoWjZnsA"
            />
          </label>
        </div>
        <div class="image-container">
          <input type="checkbox" id="zoomCheck" />
          <label for="zoomCheck">
            <img
              src="https://images.unsplash.com/photo-1543517515-d6ff15a98642?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjQ0NDc3fQ&amp;s=493802e93ec426171750ac2291e2867e"
              id="F8QDoWjZnsA"
            />
          </label>
        </div>
      </div>

As you can see, there is a white gap on the bottom of some images. I wasn't having this issue until I wrapped all the images in the <div class='image-container'> elements (something I need to eventually allow me to zoom in on the images). How can I make it so my image fills the entire image-container div? Ideally, all pics would look like the first one.

You could but it won't preserve the aspect ratio... are you sure that's what you want? — Paulie_D, Jun 02 '21 at 20:16
Ultimately, I just want to make a gallery that is responsive and fits all the images. How would I do it if I didn't care about the aspect ratio? Is there a way to fit all the images and preserve the aspect ratio? — Casey Cling, Jun 02 '21 at 20:25
Does this answer your question? [CSS Image size, how to fill, but not stretch?](https://stackoverflow.com/questions/11757537/css-image-size-how-to-fill-but-not-stretch) — disinfor, Jun 02 '21 at 20:59

score 2 · Accepted Answer · answered Jun 02 '21 at 20:26

2

Add this code to your css

.gallery img {
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
}

answered Jun 02 '21 at 20:26

Giorgio Proietti

36
1

God bless you! I forgot about `object-fit` being such a beautiful thing. – Casey Cling Jun 02 '21 at 20:30

score 0 · Answer 2 · answered Jun 02 '21 at 20:37

0

You can use background-image:url('your url ...'); background-repeat:no-repeat;background-size:cover; in css instead of using <img> tag in HTML with CSS you have more control than Html.

answered Jun 02 '21 at 20:37

M.Amin Alizadeh

115
9

How do I make my image fit the entire container?

2 Answers2