0

レスポンシブサイト用に以下の行があります。
画像がない場合は「画像なし」クラスを配置する必要があります。 

<div class="row">
    <div class="column">
        <img id="first" width=275 height=385 src="flower-275x385.jpg" />
        <img id="second" width=275 height=385 class="no-image" src="blank-1x1.png" />
    </div>
</div>

<style>
    .row {
        width:400px ;
    }
    .column {
        width:50% ;
    }

    .column img {
        width:100% ;
        height:auto ;
    }

    .column img.no-image {
        background:red url(image-pending.jpg) no-repeat center ;
    }
</style>

問題は、空白の画像が常に正方形として表示されることです。blank.png
の自然なサイズのため、 1x1です。 "height:auto" は、HTML で定義されたサイズ (275x385) をリセットまたは無視しているようです。これは、調べるため のjsfiddleです。JSなし で最初の画像のように合わせる方法は?


編集:これはJS操作でのみ解決できると思います:私の解決策、以下のアドバイスをありがとう!

4

3 に答える 3

0

あなたの質問を誤解していなければ、css プロパティ background-size を試してみてください。

<style>
.column img.no-image {
    background:red url(image-pending.jpg) no-repeat center; 
    background-size:275px 385px;
}
</style>

    <img id="second" class="no-image" src="blank-1x1.png" />

at html 内に width&height のインライン スタイル css を記述する必要がある場合は、記述するサイズの数の後に 'px' を追加する必要がありますか?

さらに役立つドキュメントについては、http://www.w3schools.com を 参照してください :)

于 2013-04-06T06:22:13.480 に答える
0

CSSでこれを行うことを検討できます。次のような画像がありません。

http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg

すべての画像に対して、次の CSS を指定します。

img {background: url("no-image.png") no-repeat center center transparent;}

したがって、この方法では、読み込まれる画像には No Image が表示され、次に画像のない画像にはこれが表示されます。:) DeviantArtも同じ手法を使用しています。これをチェックしてください。

于 2013-02-09T13:24:14.060 に答える
0

あなたが試すことができます：

.column img.no-image {
    background:red url(image-pending.jpg) no-repeat center ";
    height:385px;
}
于 2013-02-09T13:27:34.397 に答える