爲什麼瀏覽器縮小時圖像不會縮小（響應）？

我在這裏有一個例子（在@ bjb568的幫助下）。請點擊它以查看它在Chrome/IE/FF中的工作原理。爲什麼瀏覽器縮小時圖像不會縮小（響應）？

這裏是所有代碼。

<div style="text-align:center"> 
<div class="media"> 
    <img src="http://www.trumba.com/i/DgCAOmnZFp7ia4FDZJne5SHC.gif" /> 
    <div class="caption"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. 
    </div> 
</div> 
</div> 

.media { 
    position: relative; 
    display: inline-block; 
} 
.media .caption { 
    position: absolute; 
    bottom: 0; 
    text-align: left; 
} 
img { 
    max-width: 100%; 
}

在Chrome（Windows）中，當瀏覽器的視口比圖像寬度窄時，圖像會相應縮小。這就是我要的。

但是，它並沒有相應地IE（V10時，Windows）和Firefox（V26，Windows）中收縮。

有誰知道爲什麼和解決？

謝謝！

來源

2014-01-11 curious1

我認爲差異可能是在瀏覽器確定你100％是什麼意思的方式。 Chrome似乎認爲它是對父元素的引用，FF似乎認爲它意味着100％的圖像大小。 –

@Thomas，非常感謝您的意見！ – curious1

奇怪的是，添加最小寬度似乎並沒有像預期的那樣修復它。似乎所有相對大小不會與FF混合。需要一個字面的地方。 –

對於img，在你的CSS改變max-width到width。

Here's a fiddle。

最大寬度只設置的最大寬度，而不是實際的寬度。

來源

2014-01-11 04:05:15 knrz

很多很多，謝謝！ – curious1

如果您使用img元素，您可能需要使用寬度：100％;最大寬度：100％;並顯示：block;好的措施。省略顯示：塊可能會讓你後來陷入麻煩。 – Smith

@史密斯我更新了你的建議小提琴 - 謝謝！ – knrz

你有沒有在你的HTML文檔的頭部分這一行？

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

在沒有看到整個html文檔的情況下進行疑難解答有點困難。

來源

2014-01-11 03:57:52 Kenzo

是的，我有這條線，但它似乎沒有效果。所有代碼都非常簡單，你可以在小提琴示例中看到它。 – curious1

你能發佈一個鏈接到HTML頁面嗎？ – Kenzo

請查看帖子中的小提琴鏈接。 – curious1

爲什麼瀏覽器縮小時圖像不會縮小（響應）？

回答

相關問題