如何在不影響非空圖像的情況下調整空白圖像的大小？

我想修復空白圖像的大小到150px。在Firefox上，我可以使用float: left，但它在Google Chrome上不起作用。如何在不影響非空圖像的情況下調整空白圖像的大小？

HTML：

<div> 
<img src='some broken url' alt='no image'> 
<br> 
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'> 
</div>

CSS：

div { 
    width: 450px; 
    height: 500px; 
    background: cyan; 
} 

img { 
    display: block; 
    max-width: 100%; 
    min-height: 150px; 
    min-width: 150px; 
    background: grey; 
}

是否有這個CSS的解決方案？

我覺得有一些誤解。 srcs應該是隨機的，我不會先進的。

來源

2012-06-17 Question Overflow

'IMG [來源] { ... }'離開了SRC，如果它是空 – nbrooks

理想的情況下，使用空的佔位符<div>此：

<div> 
<div><!----></div> 
<br> 
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'> 
</div>

...並給它您需要的尺寸。這將允許你做這樣的東西在它的位置顯示一個背景圖像佔位符等

來源

2012-06-17 10:57:22 Tom

但是，這不需要一些JavaScript？我不知道如果圖像可用於更改html元素。 –

你只需要在服務器端渲染它作爲圖像或div，而不是Javascript。但是，如果這聽起來太複雜了，我會採用dop-trois的建議。 – Tom

但是網址應該是隨機的外部鏈接，我的意思是src =''來表示斷開的鏈接。已編輯我的問題以清楚說明。 –

如果你想樣式空圖像標籤：

img[src=""] { width: 150px; }

應該工作，期待IE6。

如果您想讓它跨瀏覽器兼容，那麼@Tom的解決方案將是您的最佳選擇。

或者jQuery的解決方案（CSS因爲無法檢查損壞的網址）：

$('img').error(function(){ 
    $(this).css('width', '150px'); 
});

來源

2012-06-17 10:58:33

在這種情況下，爲了防止OP很重要，IE6不支持此屬性選擇器。 – Tom

@Tom謝謝。我忘了提及。編輯我的答案。 –

我認爲存在一些誤解，網址應該是隨機的。 –

如何在不影響非空圖像的情況下調整空白圖像的大小？

回答

相關問題