CODEWITHSUNDEEP
htmlcssimageflexbox
Keaire
Keaire

Reputation: 899

Flex containers and large width of an image inside an item

I'm having a very weird problem with scaling images inside a flex container.

This is my flex container:

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  max-width: 100%;
  max-height: 1000px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg">
  </div>
</div>

As you see, .scaleimages class, with a really simple trick, it scales correctly all the images inside the item avoiding any type of overflow.

If I set the image to a medium-large width with width="100000", the image is still scaled correctly avoiding overflows.

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  max-width: 100%;
  max-height: 1000px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="100000">
  </div>
</div>

Now, if I set the image to a very large width with width="10000000000000", the image overflows slightly:

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  max-width: 100%;
  max-height: 1000px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="10000000000000">
  </div>
</div>

You may ask, why should I set such a large width? Because the widht/height values of the image comes from an user input, so he can break the page by setting a very large width.

Why is this happening? There is a way to fix it? Thanks.

Upvotes: 0

Views: 347

Answers (2)

Hamza Dahmoun
Hamza Dahmoun

Reputation: 1294

You can always fix the size of the image tag, it will not flow over its parent 

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <style>
    .flex {
      display: flex;
      background-color: red;
    }
    
    .scaleimages img {
      min-height: 200px;
      max-height: 200px;
      min-width: 200px;
      max-width: 200px;
    }
  </style>
  <div class="flex">
    <div class="item1">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="item2 scaleimages">
      <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="10000000000000">
    </div>
  </div>
</body>

</html>

Upvotes: 0

Alberto Rhuertas
Alberto Rhuertas

Reputation: 773

I think you can also set width:100% to the .scaleimages img to prevent bigger sizes and thus control the size with your container.

.flex {
  display: flex;
  background-color: red;
}

.scaleimages img {
  width: 100%;
  max-height: 1000px;
}

.scaleimages {
  width: 500px;
}
<div class="flex">
  <div class="item1">
  Lorem ipsum dolor sit amet.
  </div>
  <div class="item2 scaleimages">
  <img src="https://image.shutterstock.com/image-photo/colorful-flower-on-dark-tropical-260nw-721703848.jpg" width="1000000000000000000000">
  </div>
</div>

Upvotes: 1

Related Questions