是否可以缩小浮动元素旁边图像的宽度（响应）？答案

【问题标题】：Is it possible to shrink the width (responsive) of an image beside a floated element?是否可以缩小浮动元素旁边图像的宽度（响应）？
【发布时间】：2017-04-01 11:16:16
【问题描述】：

我正在尝试将现有设计转换为（有点）响应式布局。它在左上角有一个浮动框（蓝色框），其余内容应该浮动（文本和绿色框，代表图像）。

我正在寻找一种方法来调整图像（绿色框）的大小，只要它位于浮动的蓝色框旁边，但在被其他内容（lorem ipsum）推到它下方时恢复正常大小.

我通常的做法是说max-width:100%，但由于蓝框，这不会在这里起作用。我已经有一种方法（fiddle，与下面的 sn-p 相同）使用包装 div，它演示了所需的行为，但这意味着将每个内容图像包装在一个 div 中。

在没有包装 div 的情况下，还有其他聪明的方法吗？

/* try varying the width of #wrap to see the effect */
#wrap {
  border:1px solid #aaa;
  min-height:200px;
  width:280px;
  background-color:#ddd;
  padding:10px;
}
#blue {
  width:150px;
  height:100px;
  border:1px solid #aaa;
  float:left;
  background-color:#ccccff;
  overflow:hidden;
  margin-right:10px;
}
#green {
  min-width:100px;
  min-height:30px;
  background-color:#ccffcc;
  border:1px solid #aaa;
  overflow:hidden;
  max-width:100%;
}
#green > img {
  width:100%;
}

<div id="wrap">
  <div id="blue"></div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
  <div id="green"><img src="http://lorempixel.com/400/200/"/></div>
</div>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

这是一种方法。

假设您的蓝色和绿色 div 的并排布局可以工作，直到您将视口减小到 800 像素。您可以使用 CSS 和媒体查询，如下所示：

/* set default sizes for #green and #blue  */ 

#green{
 width:A;
}  

#blue{
 width:B;
}  

/* on narrow viewports resize #green and #blue and stack them one over the other  */  
@media (max-width: 800px) {  

     #green{
       clear:left:  
       width: C;
     }  

    #blue{
    width:D;
   }

 }

希望这会有所帮助！

【讨论】：

这更像是一种自适应而不是响应式方法，我希望找到一个真正响应式的解决方案。我会看看我是否能找到一个好的折衷方案，但我暂时不会将此标记为答案。谢谢你的想法。
嗨@z00l，根据您的设计细节和页面上的元素，此建议的选项可能是使用 float:left;而不是清除媒体查询中的#green div，而不是为#green 和#blue 使用固定的像素宽度，而是使用像% 或vw 这样的相对尺寸。

【解决方案2】：

试试这个：

<div id="wrap">
  <div id="blue"></div>  
  <div id="green"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p><img src="http://lorempixel.com/400/200/"/></div>
</div>

【讨论】：

不是我的问题的解决方案。这将导致文本部分也移动到蓝色框下方，这不是一个选项。感谢您的意见。