Why do my image gets cropped when resized in browser?

pvs karthikeya 0
Viewed 37

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>

css html
2 Answers

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.

Helena Sánchez0

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;
}

Aykut Bayram0
Related