調整瀏覽器窗口大小時，縮放圖像而不是在文本周圍環繞文本

Question

我通過使用display：inline在div旁邊放置了帶有一些文本的圖像。 當瀏覽器窗口的大小調整為更窄時，我希望圖像按比例縮小，而不是先用文字換行。

當前，當調整窗口大小時，文本將環繞在圖像下方，並且只有這樣，由於其最大寬度，圖像才會縮放。

最終目標是在水平菜單旁邊放置一個水平徽標，並在菜單保持原位的同時在窗口上調整徽標比例。

如果僅使用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/嗎？

1. 當您最大化窗口時，徽標將最大增長到300px的寬度。
2. 容器的最小寬度設置為300px，因此單詞不會自動換行
3. 徽標的寬度為50％，表示#container寬度的50％

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

#container {
    min-width: 300px
}

Answer 3

這個答案可能是矯kill過正：

這是什么：

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;
}

這是小提琴