0

空の画像のサイズを に固定したい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 は、事前にはわからないランダムな URL であると想定されています。

4

2 に答える 2

0

理想的には、<div>これには空のプレースホルダーを使用します。

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

...必要な寸法を指定します。これにより、背景のプレースホルダー画像をその場所に表示するなどのことができます。

于 2012-06-17T10:57:22.380 に答える
0

空のイメージタグをスタイルしたい場合:

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

動作するはずです。IE6 に期待してください。

ブラウザ間の互換性を確保したい場合は、@Tomのソリューションが最適です。

または jQuery ソリューション (CSS は壊れた URL をチェックできないため):

$('img').error(function(){
    $(this).css('width', '150px');
});
于 2012-06-17T10:58:33.567 に答える