CODEWITHSUNDEEP
htmlcss
Kim
Kim

Reputation: 1175

Need image to fill height of div

I did do many searched for this but anything I try is not working. I need the image to fill the height of the div, the extra image can get off to the right. But anything I try is not working... What am I missing? I don't want to see any red in this box but yet keep the proportions of the image. Thank You!

https://jsfiddle.net/rhwx23o4/6/

<figure id="main-img"><img src="http://http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg"/></figure>

figure#main-img {
width:100%;
min-height: 200px;
background-color: red;
    overflow: hidden;

}
figure#main-img img {
    width: 100%;
    object-fit: contain;
}

Upvotes: 3

Views: 1847

Answers (5)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Just a little bit of work around. On the breakpoint i.e here 840px I gave property display:none to your image and gave outer div background of same image.

NOTE: In media query I had to hard-code the max-width. It won't be same for all images.

figure#main-img {
  width: 100%;
  min-height: 200px;
  background-color: red;
  overflow: hidden;
}

figure#main-img img {
  width: 100%;
}

@media (max-width: 840px) {
  div {
    background: url('http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg');
    height: 200px;
    background-size: cover;
    background-position: center center;
  }
  img {
    display: none;
    overflow: auto;
    min-height: 200px;
    max-height: 200px;
  }
}

figure {
  margin: 0px;
}
<figure id="main-img">
  <div><img src="http://www.kimwilddesigns.com/web-lesson/4-4_start/images/hp_main-img_1.jpg" /></div>
</figure>

Upvotes: 0

Tushar Shukla
Tushar Shukla

Reputation: 6615

You can just use display: flex; in <figure> like this codepen: 

figure#main-img {
    width:100%;
    min-height: 200px;
    background-color: red;
    overflow: hidden;
    display: flex;
}


Flex has magical powers to adjust content within it.


In case you do not want <figure> to take up whole screen width (which it would being a block element), you can change its display to display: inline-flex; and then add a certain width/max-width to it.

Upvotes: 0

Mohit Mutha
Mohit Mutha

Reputation: 3001

Check this https://jsfiddle.net/rhwx23o4/76/

Added height="100%" and width="100%" to the image tag

Upvotes: 0

Tan Duong
Tan Duong

Reputation: 2142

You can use height: 100vh;

https://jsfiddle.net/rhwx23o4/65/

figure#main-img {
width:100%;
height: 100vh;
display: block;
background-color: red;
    overflow: hidden;

}
figure#main-img img {
    height: 100vh;
    object-fit: contain;
}

Upvotes: 3

ecg8
ecg8

Reputation: 1392

Try this CSS. Is this what you want? I gave the image a display property of block and changed the object-fit to cover instead of contain.

figure#main-img {
  width:100%;
  min-height: 200px;
  background-color: red;
  overflow: hidden;
}
figure#main-img img {
  display: block;
  min-height: 200px;
  width: 100%;
  object-fit: cover;
}

Upvotes: 0

Related Questions