0

これは古典的なものだと思います。同様の質問がたくさん見つかりましたが、答えはありませんでした。

不明な高さの画像をdivに垂直方向に中央揃えしたいoverflow:hidden

これは私が今持っているものです：

.outer {
    padding-top:49px;
    height:49px;
    width:280px;
    overflow:hidden;
    background-color:yellow;
}
.outer .inner {
    float:left;
    position:relative;
    display:block;
    background-color:blue;
}
.outer .inner img {
    position:relative;
    top:-50%;
    width:280px;
    height:auto;
    border:0px; 
    display:block; 
}

したがって、はby.innerの中央にプッシュされるため、高さ 2 x 49px = 98px の「ウィンドウ」が得られます。すると、高さから50％押し出されると思っていたのに、なぜか数値が違う…</p> .outerpadding-topimg.inner

私が間違っていることを誰かが知っていますか？

前もって感謝します！

4

2 に答える 2

1

私は同様の状況に直面し、別のアプローチで解決しました。そのために、画像をdivの背景画像として使用しました。コードサンプル

<head>
    <style>
        div.imgbox1{
            width: 160px;
            height: 110px;
            overflow: hidden;
            background-position: 50% 50%; /* for vertical and horizontal center alignment*/
        }
    </style>
</head>

<body>
    <div class='imgbox1' style="background-image: url(http://photos-h.ak.fbcdn.net/hphotos-ak-snc6/399232_10151118743727680_899168759_a.jpg)" >
    </div>
</body>

imgタグを使用する必要がない場合は、これを試すことができます

于 2013-03-27T14:17:26.920 に答える
0

まず最初に... 取得している結果が得られている理由の説明。これは非常に簡単です。設定position: relative;(またはその点では絶対) を設定し、次に設定するtop: 50%;と、画像の最上部が 50% に揃えられます。画像の高さを 1px にすると、1px が中央にあることがわかります。残念ながら、CSS を使用して、画像の上端ではなく中央に揃えるように指示する方法はありません。

今...可能な解決策...

この div 内には他に何も入っていないと仮定すると.inner、画像がマージンを介して内側の div の高さを決定できるようにすることを検討しましたか?

たとえば、このJSFiddleを見てください。

左と右のマージンを自動に設定し、上下のマージンをいくつかのpx値に設定することで、.inner div内の画像を「中央に配置」できます...私の例では60pxです。

合計 div の高さ 600px を取得する必要があり、画像の高さが常に 400px の場合、上下の余白を 100px にすると、合計の高さが 600px になります。(400+100+100=600)。

HTML: 

<div class="outer">
    <div class="inner">
        <img src="http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg">
    </div>
</div>

CSS: 

.outer {
    height:520px;
    width:520px;
    overflow:hidden;
    background-color:yellow;
    border: 2px solid purple;
}
.outer .inner {
    width: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    padding: 10px;
    margin: 0 auto;
}
.outer .inner img {
    width:280px;
    height:auto;
    margin: 60px auto;
    border:0px; 
    display:block;
    border: 1px solid orange;
}

2番目に考えられる解決策...

<img>タグがタグのままである必要はないと仮定すると、<img>これを行うための非常に簡単な方法は、画像自体を .css として CSS に移動することbackground-imageです。

このソリューションのデモについては、このJSFiddleを参照してください。

HTML:

<div class="inner">
</div>

CSS:

.inner {
    width: 540px;
    height: 340px;
    display:block;
    background-color:blue;
    border: 1px solid red;
    margin: 0 auto;
    background: blue url('http://farm9.staticflickr.com/8311/8023199579_f52f648727_m.jpg') no-repeat 50% 50%;
}
于 2013-03-27T15:03:16.380 に答える