<img>表演奇怪

我已經做了一個小畫廊（http://www.kongeboa.dk/billeder/3/Coco/）如果刷新，並選擇查看實際圖像下方的其他縮略圖之一，您將看到圖像隨機調整大小... 我有一個圖像標籤上的寬度設置爲100％我相信，所有圖像的大小均爲460px，以填充設計的寬度。當查看所有縮略圖時，大圖顯示的尺寸正確（460px）<img>表演奇怪

問題發生在Safari和Chrome中。 OSX和Windows。

我不知道爲什麼會這樣，我不知道如何調試它...

來源

2011-05-24 mnstrflkrn

在這裏看不到任何奇怪的行爲。一切都有正確的大小和縮略圖也完美地工作。當出現這個錯誤時，你使用什麼瀏覽器/操作系統？ – 2011-05-24 11:28:46

我剛剛編輯我的帖子，讓你知道，這是鉻和Safari瀏覽器（mac osx和windows） – mnstrflkrn 2011-05-24 11:29:49

我太過於害怕蛇;我不會解決這個問題:-p – diEcho 2011-05-24 11:29:56

您應該從.image刪除float: left。

這是某種來自width="100%"，float: left的收縮包裝行爲和圖像緩存的組合的某種WebKit錯誤。

Live Demo - （檢查它在Chrome中，你會看到的圖像是全寬）

來源

2011-05-24 11:32:43 thirtydot

如果你知道他們都得到了460像素的寬度爲什麼不設置width="460"？據我所知，img.width的百分比不是HTML規範的一部分。

如果你想確保圖像總是充滿它的容器，那麼你想要的是CSS樣式width:100%。

來源

2011-05-24 11:29:02

由於圖像可以更小:)我需要的設計工作智能手機以及沒有任何其他樣式表或任何東西:) – mnstrflkrn 2011-05-24 11:30:35

總之：從'.image'風格刪除float: left;。由於'.image'風格使得包含圖像的div向左浮動，因此100％相對於適合圖像大小的div大小，因此您可能會在不同的瀏覽器中獲得可變結果。如果您從'.image'樣式中刪除float: left;，它將填充100％的寬度，並且圖像將反過來適合其寬度的100％，並且所有內容都應該很大。

來源

2011-05-24 11:32:41

我試試看... 從IMG標記刪除width="100%"並從width:100%;。 img類。不確定該解決方案是否適合您？

來源

2011-05-24 11:36:05 Fredrik

回答

相關問題