如何缩小img以适应其flex容器？

Question

在这个JSFiddle中，如何将img / img-container缩小到与其最宽的兄弟div一样宽？

.outer {
  display: inline-flex;
  flex-flow: column;
}

.outer span {
  display: flex;
}

div {
  border: 1px dotted black;
}

<div class="outer">
  <div>
    <span>text</span>
    <span>more text</span>
  </div>
  
  <div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
  </div>
  
  <div>
     <span>this should determine width</span>
  </div>
</div>

Answer 1

您可以使用CSS表格布局执行此操作，并在表格上设置width: 1%，在文本元素上设置white-space: nowrap。

＆＃13;

＆＃13;

.outer {
  display: table;
  width: 1%;
}
.outer span {
  white-space: nowrap;
}
div {
  border: 1px dotted black;
}
img {
  max-width: 100%;
}

＆＃13;

<div class="outer">
  <div><span>text</span><span>more text</span></div>
  <div class="image">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
  </div>
  <div><span>this should determine width</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

正如你特别提到的Flexbox布局一样，这里是使用伪和位置的技巧。请注意，它仅在您已知道图像宽高比时才有效，例如下面的方形图像。

＆＃13;

＆＃13;

div {
  border: 1px dotted black;
}

.outer {
  display: inline-flex;
  flex-flow: column;
}

.image {
  position: relative;
}

.image:before {
  content: "";
  display: block;
  padding-top: 100%;
  /*https://stackoverflow.com/a/10441480/483779*/
}

.image img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
}

＆＃13;

<div class="outer">
  <div class="image">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
  </div>
  <div>this should determine width</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我不确定此解决方案是否与跨浏览器兼容，但它适用于Chrome 64，Safari 11和Firefox 57.

将包含img的元素设为width: 0; min-width: 100%; max-width: 100%;，将img本身设为width: 100%;。

像这样：

div {
  border: 1px dotted black;
}

.outer {
  display: inline-flex;
  flex-flow: column wrap;
}

.child {
  width: 0;
  min-width: 100%;
  max-width: 100%;
}

.img {
  width: 100%;
}

<div class="outer">
  <div>
    <span>text</span>
    <span>more text</span>
  </div>
  
  <div class="child">
    <img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded" />
  </div>
  
  <div class="main">
     <span contenteditable>this should determine width</span>
  </div>
</div>

另一种解决方案

使用background-image代替img。这允许我们使用flexbox中最宽元素的宽度来缩放图像。

诀窍是在元素上设置padding-bottom，图像与图像比例成比例。在这种情况下，图像是方形的，所以我将设置`padding-bottom：100％;所以它创造了一个方形元素。

如果图像是宽矩形，200 x 100像素，我会设置padding-bottom: 50%。或者，如果图像是一个高大的矩形，100 x 200像素，我会设置padding-bottom: 200%。

像这样：

div {
  border: 1px dotted black;
}

.outer {
  display: inline-flex;
  flex-flow: column wrap;
}

.img {
  background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded);
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 100%;
}

<div class="outer">
  <div>
    <span>text</span>
    <span>more text</span>
  </div>
  
  <div class="img">
  </div>
  
  <div>
     <span contenteditable>this should determine width</span>
  </div>
</div>

Answer 4

你的CSS容器已经和它最宽的兄弟div一样宽。你只需要用油漆或photoshop缩小图片的边框。