css - 画像を取得して div を引き伸ばす

Question

DIVクラスの高さを伸ばす画像を取得するにはどうすればよいですか?

現在、次のようになっています。

ただし、画像が適切に収まるDIVように引き伸ばしimageたいのですが、画像のサイズを変更したくありません。

DIV(灰色のボックス)の CSS は次のとおりです。

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
}

画像に適用されている CSS:

.product{
    display: inline;
    float: left;
}

それで、どうすればこれを修正できますか？

score 27 · Accepted Answer

27

overflow:auto;に追加.product1

于 2008-09-03T06:11:49.363 に答える

score 6 · Accepted Answer

画像の後のマークアップに、のようなものを挿入します<div style="clear:left"/>。少し面倒ですが、これが私が見つけた最も簡単な方法です。

その際、その画像に少し余白を置いて、テキストが画像にぶつからないようにします。

score 3 · Accepted Answer

@John Millikin が正しいと仮定すると、コードは

.product + * { clear: left; }

div の後のコードを手動で調整する必要なく、同じことを行うだけで十分です。

score 3 · Accepted Answer

One trick you can use is to set the <div>'s overflow property to hidden. This forces browsers to calculate the physical size of the box, and fixes the weird overlap problem with the floated image. It will save you from adding in any extra HTML markup.

Here's how the class should look:

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
    overflow: hidden;
}

score 2 · Accepted Answer

2

これは私にはclearfixの仕事のように見えます...

于 2008-09-06T20:27:43.307 に答える

score 2 · Accepted Answer

次のことを試してください。

.Strech
{
    background:url(image.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;

    width:500px;
    height:500px;
}

score 1 · Accepted Answer

display:inline  
float:left

あなたの問題ですか

フローティングは、親の幅が子によって引き伸ばされないようにします。フロートなしで画像を配置してみてください。フロートを外すと、望ましい効果が得られるはずです。
別のアプローチは、フロートがスコープクリープしないように、親要素の最後でフロートをクリアしていることを確認することです。

更新:リンクを表示した後表示されている高さの問題は、フロートがクリアされていないためです。

css - 画像を取得して div を引き伸ばす

7 に答える 7

Related

Reference