Question

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

在我将图像添加到可伸缩列之前，布局可以根据不同的屏幕尺寸进行扩展。如果容器下降到图像的大小，它会推动列太宽，压缩我的300px右列。

我设置

width:100%;

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

max-width:100%;

没有帮助。

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

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

编辑：经过多年的讨论，结果证明broswers之间的行为有所不同 - Chrome缩放容器，缩小图像（按照最大宽度），但Firefox只是将所有内容推出。在每个中打开：https://jsfiddle.net/andyg1/sb7zefr5/

Answer 1

删除width:100%;并保留max-width:100%;。这样可以使图像保持原始尺寸，但如果容器较小，则将图像缩小到100％宽度。

以下是https://jsfiddle.net/v4kL409v/

的示例

Answer 2

您可以使用width: 100%和实际尺寸（如果图像或最大尺寸为max-width，例如

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

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

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

Answer 4

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

min-width:0;

包含响应的元素。如下所述：Firefox flexbox image width

Answer 5

将00:00添加到图片。

display:block

响应式图像，如果容器较大，则不是100％宽度 - 容器是flexbox

5 个答案: