Fitting picture into div

Question

I am facing problem with fitting picture into div. Basically divs are the cards headers. Pictures are in different orientation and also size. What should I do to fit them in ?

Photo in div

Hard to answer without any information on your code. You could however take a peek here and see if that's useful http://stackoverflow.com/questions/14262938/child-with-max-height-100-overflows-parent/14264093#14264093 — Daniel, May 25 '16 at 14:06

score 4 · Accepted Answer · answered May 25 '16 at 14:07

I use this trick and works really well for me:

<div class="card" style="background-image: url(...)"></div>

And the the CSS:

.card {
   background-size: cover;
   height: 400px;
   width: 600px;
}

The point is to scale the image using the cover background sizing method that shows most of the image and also covers the whole div so your items will be consistent in size.

score 2 · Answer 2 · answered May 25 '16 at 14:24

2

Okay I have fixed the problem. I have assigned class to the div.

<div class="fill">
  <img src="...">
</div>

and in css.

.fill {
  max-width: 70%;
  height: 100%;
}

.fill img {
  width: inherit;
  height: inherit;
}

answered May 25 '16 at 14:24

Cerber

103
1
7

score 2 · Answer 3 · answered May 25 '16 at 18:49

Here is an approach with object-fit.

Fill : This will stretch the image to fit the parent disregarding the aspect-ratio.

Contain: Preserves the aspect-ratio but may increase or decrease the size of image. Low res scaling up may be distorted.

Cover: Keeps the aspect ratio of the image and will fit the parent container but will most likely crop the image.

.img-container {
  height: 300px;
  width: 400px;
  background-color: yellow;
}

.cover {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.contain {
  object-fit: contain;
  height: 100%;
  width: 100%;
}

.fill {
  object-fit: fill;
  height: 100%;
  width: 100%;
}

<h1>Cover</h1>

<div class="img-container">
  <img src="https://i.stack.imgur.com/BPfiX.jpg" class="cover" />
</div>

<h1>Contain</h1>
<div class="img-container">
  <img src="https://i.stack.imgur.com/BPfiX.jpg" class="contain" />
</div>

<h1>Fill</h1>
<div class="img-container">
  <img src="https://i.stack.imgur.com/BPfiX.jpg" class="fill" />
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

browser support is the issue, but otherwise would like this option in the future — AlFra, May 25 '16 at 20:30

score 2 · Answer 4 · answered May 26 '16 at 08:37

I am guessing what you want, I've also seen the post where you've answered your own question. Here is one other possible solution. You can play with it and set container width and height with different values. I've used two pictures. One with height>width and the other with height<width. here is also fiddle

.img-container {
  border: 2px dashed #f00;
  line-height: 0;
  text-align: center;
}
.img-container img {
  max-height: 100%;
  max-width: 100%;
  height: auto;
}

<div class="img-container">
  <img src="https://upload.wikimedia.org/wikipedia/en/0/05/Doctor_Who_-_Current_Titlecard.png" alt="drwho">
</div>
<div class="img-container">
  <img src="https://lh4.googleusercontent.com/-MkDsiF5-BXQ/AAAAAAAAAAI/AAAAAAAAKv0/dRBJk-2PGw4/s0-c-k-no-ns/photo.jpg" alt="who2" />

score 1 · Answer 5 · answered May 25 '16 at 14:29

You can try both of these options:

.card-image {
    background: url(...);
    background-size: cover;
}

Two notes: - about 7% of browsers don't support cover; - using 'fixed' with background can cause unpredictable issues; - you can also try background-size: contain and see if it gives you better results.

Also, I would recommend reserving some space for the image until it loads, to avoid document reflow when picture begin reloading.

.card-container {
    position: relative;
}

.card-image {
    padding-bottom: 56.25%; //for 16:9 ratio
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
 }

Fitting picture into div

5 Answers5