Question

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

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

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

我在 CSS 解决方案之后， IE 兼容，没有硬编码的固定宽度。

＆＃13;

#text
{
  background-color: black;
  color: white;
  float: left;
}

img
{
  position: absolute;
  max-width: 100%;  
}

＆＃13;

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

＆＃13;

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>

Answer 2

HTML：

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

CSS：

#text
{
  background-color: black;
  color: white;
  float: left;
  width:15%;
}
.aPicture{
    float:right;
    width:85%;
}
img
{
  max-width: 100%;
  height:auto;  
}

Answer 3

将父div标记设置为图像#div2>img，然后将其max-width设置为100%

Answer 4

你可以试试这个：

https://fiddle.jshell.net/qbgnp1ar/2/

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

.container {
    width:100%;
}
.image {
    overflow:hidden;
}

.image > img {
  width: 100%
}

.text {
    background:blue;
    float:left;
}

这里有一些额外的信息：http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ 一个希望能帮助到你！：）

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

4 个答案: