CODEWITHSUNDEEP
htmlcssheight
Alex Florentin
Alex Florentin

Reputation: 79

Problems with height:100% on image

anyone know how to solve this problem:

The image of the example overboard the image-wrapper that contain it. It works correctly if it's smaller or change "max-height:40vw" to "height:40vw", but both solutions are bad for me.

What I'm trying it's to get that image responsive in different resolutions ( desktop to laptop, for mobile I have a different design ), like here: http://goo.gl/yRo5OE (deviantart)

The website where I'm trying to implement: http://goo.gl/AAF4U7

Thank you, if you have another solution for this please tell me.

.image-wrapper {
  display:flex;
  justify-content:center;
  max-height:40vw;
  background:#141414;
}

.image-wrapper img {
  height:100%;
  width:auto;
}
<div class="image-wrapper">
  <img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>

Upvotes: 0

Views: 65

Answers (2)

Swastik Padhi
Swastik Padhi

Reputation: 1909

Please see if the following helps-

  1. img{max-width:100%; width:auto; vertical-align: top;}

    OR

  2. http://jsbin.com/guwicolora/edit?output

Upvotes: 0

Ankit Chaudhary
Ankit Chaudhary

Reputation: 4089

just remove the height:100% from css

.image-wrapper {
  display:flex;
  justify-content:center;
  max-height:40vw;
  background:#141414;
}

.image-wrapper img {
  width:auto;
}
<div class="image-wrapper">
  <img src="http://webbiter.com/project/tattoobiter.com/wp-content/uploads/2015/06/skull-with-rose.jpg">
</div>

Upvotes: 1

Related Questions