html - 画像の割合を制限しない

Question

私は 60% の幅を与えている div を持っています。

CSS

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg');
}

HTML

<div id="image">
     <img src="cleaning.jpg" />
</div>

私の問題は、画像がページ全体にフルサイズで表示されていることです!

囲まれているdivに制限するにはどうすればよいですか?

ありがとう！

score 1 · Accepted Answer

要素のオーバーフローを管理する必要がある可能性があります。次のことを試してください。

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg') no-repeat;
    overflow:hidden;
}

score 0 · Accepted Answer

背景画像と通常の画像がある理由がわかりません。背景画像はコンテナーに合わせて拡大縮小されません。しかし、あなたの問題は、画像の幅も設定する必要があることだと思います。試す

CSS

#image {
    float:left;
    width:60%;
    background-image:url('cleaning.jpg');
}
#image img {
    width:100%;
}

HTML

<div id="image">
     <img src="cleaning.jpg" />
</div>

4 に答える 4