How do I fit an image to a div?

Question

I have a problem with trying to fit an image into my div. My image is bigger than my div, so when I do the traditional

 style="width:100%;"

it will resize the div, taking up more space than it should.

I've tried using style="max-width:100%;" background-size: contain; background-size: cover;

and pretty much all the methods of resizing the image to fit an entire div.

I'm using CSS grid, and so the size of the area is how i'd like to keep the entire image to fit, but when using things like max-width it just changes the size of the area, making it bigger than what it should be

I essentially want to do something like

This example

where the image would take up the entire div and not overflow

Its pretty difficult to solve something like this based on an image and one line of code. Could you provide some code that reproduces the issue or a link to where it is occurring? Here is some guidelines on what to provide when asking a question: https://stackoverflow.com/help/mcve — Aonghas M, Feb 12 '19 at 00:49
Would need to see some of your css, but add the following: overflow: hidden; background-repeat: no-repeat; background-size: cover; Another thing, are you setting the image as a background-image of the div? or are you just putting an image in the div? — Spangle, Feb 12 '19 at 00:50
@AonghasM I will try to add some code that reproduces the problem — ivan l, Feb 12 '19 at 01:01
@AdrianPop I've tried all those solutions, none of them work — ivan l, Feb 12 '19 at 01:02
@Spangle I will add some code to demonstrate, i've tried setting the div as background, img in the div, and everything else — ivan l, Feb 12 '19 at 01:02
@ivanl much appreciated. Tag me when its added and ill see if I can help if im still awake — Aonghas M, Feb 12 '19 at 01:06
@AonghasM this some what describes the problem, https://codepen.io/anon/pen/PVexwd , when using CSS grid, the image will resize the entire thing, and If i try to use the other way of using background-size: contain, it won't fit properly, would I have to resize the image ? — ivan l, Feb 12 '19 at 01:13

Spangle · Accepted Answer · 2019-02-12T01:34:36.263

I quickly created the following css grid which looks like your desired result to demonstrate. I have also added a couple cool tricks you can do with CSS grid.

body, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
  }

.container{
  margin: 0 auto;
  width:100%;
  height: 100vh;
  display:grid;
  grid-template-columns: 5% repeat(3, 1fr) 5%;
  grid-template-rows: 5% repeat(2,1fr) 5%;
  grid-gap: 1%;
}
.imageOne{
  grid-row: 2/3;
  grid-column: 2 / -2;
  background-color:rgb(247,247,247);
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}
.imageTwo{
  grid-row: 3/4;
  grid-column:2 / 3;
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}
.imageThree{
  grid-row: 3/4;
  grid-column:3 / 4;
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}
.imageFour{
  grid-row: 3/4;
  grid-column:4 / 5;
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}

<div class="container">
  <div class="imageOne">
    image one
  </div>
  <div class="imageTwo">
    image two
  </div>
  <div class="imageThree">
    image three
  </div>
  <div class="imageFour">
    image four
  </div>
</div>

Enjoy and hope it helps. Also Codepen link here

this definitely will help me, with organizing the grid, however the problem for me is that if i put a big image on of of those placeholders (like .imageOne) it will cut off, however, would resizing the image solve this issue? — ivan l, Feb 12 '19 at 01:18
I just updated the answer and added background-position:center; This will center of the image in each grid. You do have to consider the size and dimensions of the image, otherwise the image can be distorted to cover the shape of the div. Best thing to eventually use is a .svg file as they scale the best. — Spangle, Feb 12 '19 at 01:23
I think this is the best way to approach it, thank you very much, I'll definitely keep image dimensions in mind since that seems to be the thing making the image crop — ivan l, Feb 12 '19 at 01:27
Happy to help. Also, to stop the cropping, replace background-size:cover with background-size: 100% 100%; Just remember, this can cause images to be distorted to cover the shape of the div. — Spangle, Feb 12 '19 at 01:33

score 0 · Answer 2 · answered Feb 12 '19 at 01:08

I guess this may be the solution you need.

Sample

<div>
  <div class="outer">
    <img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
  </div>
  <div class="outer">
    <img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
  </div>
  <div class="outer">
    <img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
  </div>
</div>

CSS:

.outer {
  width: 180px;
  height: 180px;
  margin: 10px;
  float: left;
}

.img_size {
  width: 100%;
  height: 100%
}

All the depends on the style of outer div. Better enclose your image tag inside a div and provide appropriate width & height to that.

score 0 · Answer 3 · answered Feb 12 '19 at 01:40

I understood your scenario you can simply use object-fit css property to achieve the result.

Example:

<html>
<head>
      <title>
           Image Example
      </title>
</head>
<style>
     .outer-div{
          height:300px;
          width:300px;
     .outer-div img{
          height:300px;
          width:100%;
          /* This will set the image size as cover */
          object-fit: cover;
         /* Give this a try too..use which ever fits your scenario.
          object-fit:contain;
           */
  </style>
  <body>

        <div class="outer-div">
              <img src="path/to/image">
        </div>
  <body> 
<html>

How do I fit an image to a div?

3 Answers3