CODEWITHSUNDEEP
htmlcss
ErikO
ErikO

Reputation: 1

Image getting distorted by parent div

I have an image inside a div, I am new to html/css, the image is following the proportions of the div it is inside, which is height*width (100%*50%). I realize I can make the image correct by adjusting its height, but that seems a bit forceful. Im using display flex tags. Could it be that? 

html,body { height: 100%; margin: 0px; padding: 0px; }

#parent_div {
display: flex;
flex-direction: right;
height: 100%;
}

#child_div {
  display: flex;
  background-color: #F0A537;
  width: 50%;
  height: 100%;
}

#child_div2 {
  display: flex;
  background-color: #468966;
  width: 50%;
  height: 100%;
}

img {
  height: 20%;
  width: 20%;
}

Upvotes: 0

Views: 101

Answers (1)

L. Paz
L. Paz

Reputation: 41

You have set your image as height:20%. You need to change the 20% height to auto, that way the image will maintain its own proportions. then you set the width in either pixels or percentage to make it fit in your div.

Upvotes: 1

Related Questions