当浏览器 window 调整大小时，缩放图像而不是环绕图像

Question

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

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

最终目标是在水平菜单旁边有一个水平徽标，并在菜单保持不变的情况下调整徽标比例 window。

如果只用 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>

小提琴：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; }

Answer 2

你的意思是这样的吗http://jsfiddle.net/uLc8dcsh/3/？

此处，当您最大化 window 时，徽标将最大增加到 300 像素的宽度。
容器的最小宽度设置为 300px，因此单词不会换行
徽标的宽度为 50%，表示 #container 宽度的 50%

img {
    width:50%;
    max-width: 300px;
}
#textblock {
    display: inline
}

#container {
    min-width: 300px
}

Answer 3

这个答案可能有点矫枉过正：

这是什么：

1.浮图，溢出隐藏

如果是的话文字不会溢出到图片下面

2. 添加了清除修复以包含 div

这样图像就不会破坏外部元素（文章）

Html

<article class="clearfix">
    <img src="some image"></img>
    <p>Some random text</p> 
</article>

css

article p {
    overflow:hidden;
}
article img {
    float:left;
    max-width:80%;
}
article {
    border:1px solid;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

这里是 Fiddle

当浏览器 window 调整大小时，缩放图像而不是环绕图像

Scale an image instead of wrapping text around it when the browser window is resized

html

javascript

css

scaling

image