html - 缩小图像以水平填充页面中的剩余空间

Question

我有两个水平并排放置的 div。第一个的宽度由其中的文本决定，我只是想缩小第二个 div 中的图像，使其宽度填充页面上剩余的水平空间。

+--------------------------------------------+
|           |                                |
|           |                                |
|           |                                |
|           |                                |
|           |                                |
|  <div 1>  |            <div 2>             |
| Some text |          Large image           |
|           |                                |
|           |                                |
|           |                                |
|           |                                |
|           |                                |
+--------------------------------------------+
            <---------remaining-space-------->
<---------------- page width ---------------->

目前，我正在将图像缩小到页面宽度，但我真正需要的是缩小到页面宽度减去文本 div 的宽度。

我正在寻找一个与 IE 兼容并且没有硬编码的固定宽度的 CSS 解决方案。

#text
{
  background-color: black;
  color: white;
  float: left;
}

img
{
  position: absolute;
  max-width: 100%;  
}

<div id=text>Some text</div>
<img src="http://www.principiaprogrammatica.com/image.jpg"/>

Answer 1

您可以尝试 flexbox，它应该可以在 IE 11+ 中运行

DEMO

.content {
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
}

.image {
  -webkit-flex: 1; 
  flex: 1;
}

.image img {
  width: 100%;
}

<div class="content">
  <div id=text>Some text</div>
  <div class="image">
    <img src="http://www.principiaprogrammatica.com/image.jpg" alt="">
  </div>
</div>