顯示圖像的文字右側，就好像圖像比它真的大

我使用以下語句顯示圖像。如果它更大，那麼在保持縱橫比的同時將其調整爲較小的尺寸。但如果它較小，則不應調整大小。它理論上工作得很好，直到我放入寬度僅爲100px的圖像。然後將文本從左側（又名立即圖像後）的100像素的距離顯示>顯示圖像的文字右側，就好像圖像比它真的大

<body> 
    <div style="text-align: justify"> 
     <div width='300px'> 
      <img src='mypic.jpg' align='left' style="max-width:'300px'; max-height:'300px'" width='auto'/> 
     </div> 
     <h2> 
      mytextasdfasdfasdfasdffs 
     </h2> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
    </div> 
</body>

現在，這裏我的問題是：如何管理來實現，它看起來像即使圖像較小，總是有300 px寬度的場所使用情況？

來源

2014-12-19 Thomas

使用attr'style'，（'style =「width：300px」'） – waki 2014-12-19 09:26:29

沒有'max-width'和'max-height' HTML屬性。除此之外，HTML4'width'屬性在'div'元素上無效。 – 2014-12-19 09:27:31

@JamesDonnelly tnx糾正了這個例子（將我通過css和javascript設置的東西複製並粘貼到一個html的例子中^^） – Thomas 2014-12-19 09:28:50

不知道我是否是已瞭解正確

<body> 
    <div style="text-align: justify"> 
     <div style="min-width:300px; min-height: 300px;"><!-- always display 300px box --> 
      <img src='mypic.jpg' align='left' style="max-width: 300px; max-height: 300px; width: auto; height: auto;" /> 
     </div> 
     <h2> 
      mytextasdfasdfasdfasdffs 
     </h2> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
    </div> 
</body>

更新與浮動：

<body> 
    <div style="text-align: justify"> 
     <div style="min-width:300px; min-height: 300px; float: left;"><!-- always display 300px box on the left --> 
      <img src='mypic.jpg' align='left' style="max-width: 300px; max-height: 300px; width: auto; height: auto;" /> 
     </div> 
     <h2> 
      mytextasdfasdfasdfasdffs 
     </h2> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
     asdasfsfsfdsgsfgsfgsfgsfg<br> 
    </div> 
</body>

請注意，將寬度和高度設置爲自動不會保持Internet Explorer中的縱橫比！（不知道是什麼版本）你必須使用JS

來源

2014-12-19 09:33:13

當然可以嗎？我試了IE11和寬度：自動和設置最大寬度和最大高度到目前爲止工作得很好，所有測試我用太大和太小的圖像 – Thomas 2014-12-19 09:35:04

嘗試了你的代碼。如果我將你的照片複製到h2上，...會在圖像下方顯示，而不是在圖像周圍流動。當我離開最小高度時，它變成原來的情況一樣 – Thomas 2014-12-19 09:38:27

通過IE我的意思是IE10和更老的。 IE11是不是（內部）「MSIE 11」，但「三叉戟7」:) – 2014-12-19 09:38:44

變化

<img src='mypic.jpg' align='left' max-width='300px' max-height='300px' width='auto'/>

到

<img src='mypic.jpg' align='left' style="max-width:300px; max-height:300px; width:auto"/>

來源

2014-12-19 09:30:47

嗨即使改變它仍然顯示爲我的相同方式。測試它與鉻和IE11） – Thomas 2014-12-19 09:32:58

顯示圖像的文字右側，就好像圖像比它真的大

回答

相關問題