CODEWITHSUNDEEP
htmlcss
pvs karthikeya
pvs karthikeya

Reputation: 17

Why do my image gets cropped when resized in browser?

When height is reduced below certain limit the image placed at top of div is not visible and cannot be scrolled up as shown in the pictures. Can anyone tell on how to solve this.

Webpage when resized:
Webpage when resized

Full webpage:
Full webpage

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}
.box {
  background: lightblue;
  width: 300px;
  height: 500px;
  min-height: 300px;
}
img {
  position: relative;
  top: -20px;
  left: 120px;
}
<div class="box">   
  <img id="xy"src="https://placeimg.com/50/50/animals">
</div>

Upvotes: 0

Views: 306

Answers (2)

Aykut Bayram
Aykut Bayram

Reputation: 28

At "body" part of css, try "min-height" instead of "height".

    /*your code*/
    
body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}
.box{
    background: lightblue;
    width: 300px;
    height: 500px;
    min-height: 300px;
}
    
    /*try this one instead ("min-height" instead of "height") and (added "margin-top: 5vh" to ".box")*/
    
        body{
        display: flex;
        justify-content: center;
        min-height: 100vh;
        align-items: center;
    }

 
        .box{
        margin-top: 5vh;
        background: lightblue;
        width: 300px;
        height: 500px;
        min-height: 300px;
}

Upvotes: 1

Helena S&#225;nchez
Helena S&#225;nchez

Reputation: 220

Your img is positioned relative to the nearest positioned ancestor. That means it is being placed -10px beneath the body, because .box does not have any position set.

Upvotes: 0

Related Questions