javascript - 调整浏览器窗口大小时，缩放图像而不是在图像周围环绕文本

Question

我通过在 div 上使用 display: inline 将图像放置在带有一些文本的 div 旁边。当浏览器窗口的大小调整得更窄时，我希望图像按比例缩小，而不是让文字先环绕它。

目前，当窗口调整大小时，文本将环绕在图像下方，只有此时图像才会缩放，这要归功于其最大宽度。

最终目标是在水平菜单旁边有一个水平 Logo ，并在菜单保持原位的同时使 Logo 在窗口大小调整时缩放。

如果这可以只用 CSS 来完成，那就太好了，但如果那不可能，我会使用 Javascript。

<style>
img { max-width: 100%; }
#textblock { display: inline}
</style>

<div id="container">
  <img src="https://www.google.com/images/srpr/logo11w.png">
  <div id="textblock">Some Random Text</div>
</div>

fiddle :http://jsfiddle.net/uLc8dcsh/1/

Answer 1

试试这个:

<div id="container">
    <div class="div1"> img tag should be here  </div>
    <div id="textblock">   </div>
</div>

和CSS

img {
    max-width: 100%;
    float:left;

}
.div1{width:80%; float:left;}
#textblock {
    display: inline;
    float:right;
    width:20%;
}
#container{width:100%; float:left; }