CODEWITHSUNDEEP
htmlcss
Czmielu
Czmielu

Reputation: 1

Images in a flexbox doesn't scale properly

I put 2 images inside a flexbox with column direction and I want images to resize when I resize a browser window. They don't change as I expect.

I want images to change in their original ratio, but no matter what css style I use it fails.

It works fine when I resize a window horizontally buy not when I resize it vertically.

Additionally images go outside of the flexbox div, how can I prevent it?

#box{
    width: 100%;
    height: 100%;
}
#container {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 30%;
    background-color: red;
}
#photo {
    width: 100%;
    height: auto;
}
<div id="box">
  <div id="container">
    <img id="photo" src="1.JPG">
    <img id="photo" src="2.JPG">
  </div>
</div>

Upvotes: 0

Views: 503

Answers (1)

bruno.almeida
bruno.almeida

Reputation: 2896

One think i normally use in this scenarios is set the image as background image using css an use background-size:contain;

An example:

#box{
    width: 100vw;
    height: 100vh;
}
#container {
    display: flex;
    flex-direction: column;
    width: 50%;
    height: 30%;
    background-color: red;
}
.photo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size:contain;
}



<div id="box">
  <div id="container">
    <div class="photo" style="background-image: url('https://picsum.photos/200/300/?random')"></div>
    <div class="photo" style="background-image: url('https://picsum.photos/300/200/?random')"></div>
  </div>
</div>

https://jsfiddle.net/vbanj8st/

Upvotes: 2

Related Questions