Flex 容器和项目内图像的大宽度答案

【问题标题】：Flex containers and large width of an image inside an itemFlex 容器和项目内图像的大宽度
【发布时间】：2020-02-05 21:40:03
【问题描述】：

我在伸缩容器内缩放图像时遇到了一个非常奇怪的问题。

这是我的弹性容器：

.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>

如您所见，.scaleimages 类，通过一个非常简单的技巧，它可以正确缩放项目内的所有图像，避免任何类型的溢出。

如果我使用width="100000" 将图像设置为中等宽度，图像仍然可以正确缩放以避免溢出。

.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>

现在，如果我使用width="10000000000000" 将图像设置为非常大的宽度，图像会稍微溢出：

.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>

你可能会问，我为什么要设置这么大的宽度？因为图像的宽度/高度值来自用户输入，所以他可以通过设置一个非常大的宽度来打破页面。

为什么会这样？有办法解决吗？谢谢。

【问题讨论】：

如果图片大小是由用户控制的，也许你不应该让他们设置这么大的宽度/高度？
同意@EternalHour，为什么不将输入值限制为最多三个字符？
@EternalHour 是的，我可以这样做，但为什么呢？我是否应该在不知道我为什么这样做的情况下添加一个限制图像大小的检查？如果他们想设置大尺寸对我来说不是问题，因为就像许多 CMS 所做的那样，完全受限于干净的 css 编辑。问题是这种行为，为什么要这样做？我更喜欢用 CSS 的方式来修复它。
为什么允许用户破坏你的页面布局？这就是为什么。应用程序总是需要某种类型的约束；如文件类型、表单验证等

标签： html css image flexbox

【解决方案1】：

我认为您还可以将width:100% 设置为.scaleimages img 以防止更大的尺寸，从而控制容器的尺寸。

.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>

【讨论】：

虽然这可能会回答问题，但请更新您的答案以包含来自 CodePen 的代码。在此处使用片段功能。

【解决方案2】：

你总是可以固定图片标签的大小，它不会流过它的父级

<!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>

【讨论】：