Image to Fit Containing Div

Question

I have done this many times before but it doesn't seem to work now for whatever reason. I want the image to be the full the width of the container but it doesn't. Any ideas?

jsFiddle: http://jsfiddle.net/Lqffk1ak/

Code:

img {
  max-width: 100%;
  max-height: 100%;
}
div {
  background: #ccc;
}

<div>
  <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>

You can set width to 100% but height will be changed accordingly — G.L.P, Oct 24 '16 at 08:48
@pee2pee check [this answer](http://stackoverflow.com/questions/39289576/css-image-resize-issue/39289947#39289947) - looks like it has the explanation there. — kukkuz, Oct 24 '16 at 08:59
who downvoted this and why? this has a clear problem, enough code to replicate the issue in an MCVE. downvoting a****s are spoiling this site — Pete, Oct 24 '16 at 09:01

score 1 · Accepted Answer · answered Oct 24 '16 at 08:47

1

Just add width:100% to img

img {
    width:100%
}

answered Oct 24 '16 at 08:47

selami

2,478
1
21
25

Cladiuss · Answer 2 · 2016-10-24T08:52:38.383

1

Looking at your class, what you should add is some CSS on the full-width class to make the img width 100%. This way, only the images set as "full-width" will be forced 100%. The other one will keep the max-width rule of 100%, but won't be resized if they are smaller.

img {
  max-width: 100%;
  max-height: 100%;
}
.full-width {
  width: 100%;
}
div {
  background: #ccc;
}

<div>
  <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>

edited Oct 24 '16 at 08:52

answered Oct 24 '16 at 08:50

Cladiuss

535
10
20

Why not ? This is the case currently. The image is 600px large, and if you put the snippet in full width, the image will be 100%. Note the `full-width` class on the image. – Cladiuss Oct 24 '16 at 08:54
OP added a class `full-width` to his image. I added the `width:100%` on the full-width class to be more coherent with his code. So if the container is larger than 600px, the image still have the `width:100%` applied from the `full-width` class. Run the code snippet and expand it. – Cladiuss Oct 24 '16 at 09:01

score 1 · Answer 3 · answered Oct 24 '16 at 08:59

1

Just make your image width 100%. Even you resize your container image will fit on it.

img{
width:100%;
}

answered Oct 24 '16 at 08:59

Undecided Dev

840
6
16

score 1 · Answer 4 · answered Oct 24 '16 at 09:00

1

You can check the updated fiddle here

Change the css :

div {
    height: 100%;
}

img {
   width: 100%;
   min-height: 100%;
}

answered Oct 24 '16 at 09:00

Abhay Naik

405
1
4
17

score 0 · Answer 5 · answered Oct 24 '16 at 09:04

I know this isn't directly an answer to your question but generally speaking, upscaled images look quite nasty. A way people get past this is to have the image centered and then add a blurred version behind it.

Like this:

body {
  margin: 0;
}
.image {
  position: relative;
  text-align: center;
  overflow: hidden;
  font-size: 0px;
}
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg');
  background-size: cover;
  z-index: -1;
}
.blur {
  filter: blur(10px);
}

<div class="image">
  <div class="background-image blur"></div>
  <img src="https://s11.postimg.org/dpgqru2pv/Police2_600x250.jpg" class="full-width">
</div>

I hope you find this helpful.

The theory is sound thank you. The images should be clipped to be the right size and aspect ratio but I'll have a think about how to use this. — pee2pee, Oct 24 '16 at 09:41

score 0 · Answer 6 · answered Oct 24 '16 at 09:10

Because your Image is has 600px; height, and the you have set max-width:100%. So max-width property will only work when the parent dive will be smaller then 600px;.

To make image to the containing div, you have to give set image's property 100%; that is .full-width {width: 100%;}

Image to Fit Containing Div

6 Answers6