响应式图像，如果容器更大，则不是 100% 宽度 - 容器是 flexbox答案

【问题标题】：Responsive images, without being 100% width if the container is bigger - containers are flexbox响应式图像，如果容器更大，则不是 100% 宽度 - 容器是 flexbox
【发布时间】：2016-08-31 04:02:34
【问题描述】：

我有一个两列布局 - 固定右列宽度，左列中的可扩展内容。

在我将图像添加到可缩放列之前，布局可以很好地适应不同的屏幕尺寸。如果容器缩小到图像的大小，它会将列推得太宽，挤压我 300 像素的右列。

我设置了

width:100%;

在图像上，这解决了响应问题，但是当容器再次全屏时，图像会缩放以填充它，这不是我想要的，因为它看起来很垃圾。我添加了

max-width:100%;

这没有帮助。

简而言之，我希望图像行为是“是你的真实大小，除非容器更小，在这种情况下缩小。”

（我应该提一下，我的两列布局是用 flexbox 完成的）

编辑：在玩了很长时间之后，事实证明这是浏览器之间的行为差异 - Chrome 缩放容器，缩小图像（根据最大宽度），但 Firefox 只是将所有内容推出。在每个中打开这个：https://jsfiddle.net/andyg1/sb7zefr5/

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

删除width:100%; 并保留max-width:100%;。这将使图像保持原始大小，但如果容器较小，则将它们缩小到 100% 宽度。

这是一个例子https://jsfiddle.net/v4kL409v/

【讨论】：

不，不起作用。我知道它应该，但在这种情况下不是。我想知道这是否是因为树上的其他东西——比如 flexbox 容器......
它有效。如果你有不同的环境，那么你应该提出一个包含环境的问题。
但是您提供的 JSFiddle 不包括我在问题中提出的两列容器。我已经尝试过使用浮动和弹性框，并且带有图像的列始终优先于固定宽度 300px 的列。在浮动布局中，300px 被推到下一行。在 flexbox 布局中，300px 列缩小到 300px 以下，但不会像您对 flexbox 所期望的那样转到下一行。
我在编辑中添加了我自己的 JSFiddle 到问题中，它显示了行为，以及不同浏览器之间的不同之处。 Firefox 似乎不支持 flexbox 容器中的最大宽度。

【解决方案2】：

如果图片或容器的最大尺寸为max-width，则可以使用width: 100%和实际尺寸，例如

my_image {
  width: 100%;
  max-width: 320px;
}

这样它会随着容器缩小，但不会超过设定的大小。

【讨论】：

只有当我乐于将最大宽度设置为已知的 px 大小时，它才会起作用。我不想那样做。图像可以是不同的纵横比。最大宽度在一个纵横比下可能看起来不错，但对其他人来说很奇怪。
您可以使用具有不同最大宽度值的媒体查询。

【解决方案3】：

您可以使用图像作为弹性项目的背景。

background-image, background-repeat, background-position, and most importantly background-size

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100vw;
  height: 100vh;
}
.flex {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.bg {
  width: 50vw;
  height: 50vh;
  background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center;
  background-size: contain;
  outline: 3px dashed red;
  flex: 1 0 50%;
}
.rt {
  width: 300px;
  height: 50vh;
  outline: 3px dashed blue;
}

<div class="flex">
  <figure class="bg"></figure>
  <figure class="rt"></figure>
</div>

【讨论】：

【解决方案4】：

在确定 Firefox 和 Chrome 的问题不同后，我做了一些研究，发现可以通过添加以下内容来解决问题：

min-width:0;

到包含响应的元素。正如这里所讨论的：Firefox flexbox image width

【讨论】：

【解决方案5】：

将display:block 添加到图像。

.my_image {
    display:block;
    max-width:100%;
    height:auto;
}

【讨论】：