圖像的高度和寬度時未找到圖像

我有以下代碼：圖像的高度和寬度時未找到圖像

<div> 
    <img src="../images/curry.jpg" height="242" width="300" 
     alt="Can't find image (http://localhost/images/curry.jpg)"> 
</div>

我試圖精確地鋪陳頁左右，即使圖像沒有找到，我想Alt鍵文本佔用給定的高度&寬度。

1）現在HTML/CSS是如何工作的？ 2）如果不是，由於我從PHP生成HTML，有什麼我可以做的，以實現我想要的？例如，如果我檢查是否存在而不是IMG標記，生成包含我的替代文本的期望大小的字段集，它會起作用嗎？

來源

2011-04-29 Mawg

您對第一個問題的回答是「是」。 Alt屬性用於搜索引擎優化目的，並且表現爲您已經看到它。

雖然我必須警告你有額外的開銷，但有一個函數file_exists()來檢查圖像是否存在。

如果該函數返回false，而不是附和像正好呼應「<p>Can't find image (http://localhost/images/curry.jpg)</p>」和添加樣式屬性，指出所需的寬度和高度

<div style='height: 242px;width: 300px'>

來源

2011-04-29 03:00:31 lock

+1和答案（甚至在我編碼之前;-) – Mawg 2011-04-29 03:17:48

爲了它的價值，您可以輕鬆地將''設置爲'display：block'或'display：inline-block'，並將寬度和高度。只是默認顯示爲「inline」，因此當它變回非替換元素時，寬度/高度將被忽略。 – 2011-04-29 05:52:29

如果您使用PHP生成頁面，則可以修復div的寬度/高度。

至於「替代文字」，你可以顯示你想要的小截圖嗎？我不太明白你的意思是佔據給定的尺寸。

來源

2011-04-29 02:59:08 moskovich

+1用於回覆。謝謝。我的意思是我想要替代文字「無法找到圖像（http：//localhost/images/curry.jpg）」佔據242 X 300像素的區域。 – Mawg 2011-04-29 03:17:11

時，瀏覽器會發生什麼包裝的div找不到圖像取決於瀏覽器。只要有在一些瀏覽器看看這個，看看會發生什麼：

http://jsfiddle.net/nhHyC/

Safari使用指定的維度，但顯示在空間中的「破碎的形象」圖標。

Firefox 4使用alt文本，但忽略尺寸。

Opera和Chrome使用指定的尺寸並在該空間中顯示alt文本。

我沒有理會檢查IE瀏覽器，因爲這些設備都藏在我的測試實驗室:)

的衣櫃如果你需要特定的行爲，那麼你就必須自己用包裝材料<div>與display:inline-block並做到這一點所需的尺寸。如果你想覆蓋所有的瀏覽器，安排適當的內容將會變得更加棘手。

的alt attribute是用於那些不能顯示圖像（如屏幕閱讀器和文本僅設備）用戶代理：

對於無法顯示圖像，表單，或小應用程序的用戶代理，該屬性指定了替代文本。

來源

2011-04-29 03:22:20

對於它的價值，Firefox的行爲還取決於怪癖VS標準模式以及其他一些事情...... – 2011-04-29 05:53:10

@Boris：我有點驚訝Firefox的表現並不理性， OTOH，我正在用jsfiddle.net進行檢查，所以我沒有完全控制文檔類型。我認爲Opera和Chrome的行爲最明智，但現實與感覺無關。 – 2011-04-29 06:05:55

哦，Firefox的行爲完全合理。在標準模式下，如果圖像無法加載，則將其視爲一個「」，其中包含alt文本。佈局然後取決於應用於它的樣式;這使頁面作者能夠完全控制他們想要發生的事情。如果你的''是'display：inline'，那麼它當然會忽略寬度/高度。如果它是'display：inline-block'，那麼它將使用給定的大小。你想要哪一個完全取決於你;兩者都有用例。 – 2011-04-29 06:12:43

圖像的高度和寬度時未找到圖像

回答

相關問題