Issue: The image is taller than the img-box container
https://i.stack.imgur.com/zDBLM.png
I have identified two potential solutions, but I am not satisfied with them:
- Removing the img-box wrapper
- Applying max-height and max-width properties to the img tag like so:
max-height: 100vh; max-width: 100vw;
body {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.wrap {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 500px;
background: red;
overflow: hidden;
}
.img-box {
width: auto;
height: auto;
}
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
}<div class="wrap">
<div class="img-box">
<img src="https://picsum.photos/900/500" alt="" />
</div>
</div>
<div class="wrap">
<div class="img-box">
<img src="https://picsum.photos/200/600" alt="" />
</div>
</div>(View example on Codesandbox)