9

すべてが 400px × 400px のボックスに収まる画像がたくさんあります (つまり、サイズの 1 つは 400px で、もう 1 つはそれより小さい)。CSSを使用してできるようにしたいのですが、必要に応じてjquery/javascriptを使用して、その画像を200px x 200pxのボックスに合わせて、画像の2つの端がボックスに触れ、他の2つの端の間に隙間ができるようにしますボックス。アスペクト比を維持する必要があります。

私のHTMLは次のとおりです。

<div class="small">
    <img src="/images/photos/View.jpg" alt="View" />
</div>

そして私のCSSは：

div.images div.small
{
    width:200px;
    height:200px;
    line-height:200px;
    text-align:center;
}
div.images div.small img
{
    vertical-align:middle;
    max-width:200px;
    max-height:200px;
}

ここでサンプルを見ることができます。

残念ながら、横向きの画像はボックスの上部に収まっていますが、中央に配置したいと考えています。max-widthまた、 /に依存する賢者についてはよくわかりませんmax-height。

これらのボックス内で画像を中央に配置するにはどうすればよいですか?

4

5 に答える 5

12

これを自分のコンピューターにセットアップしたところ、問題なく動作しました。例のページを見た後、問題は画像を に設定したためですdisplay:block。一般的なルールからそのルールを削除するかimg(とにかく、グローバルに設定するのは奇妙なことです)、または上記で投稿したイメージ ルールを次のように変更します。

div.images div.small img
{
    vertical-align: middle;
    max-width: 200px;
    max-height: 200px;
    display: -moz-inline-box; /* Firefox 2 */
    display: inline-block;
}

デフォルトでは、img要素と他の「置換」要素 (Flash など) は「インライン ブロック」です。これは、テキストのようにインラインで流れるが、幅と高さがあることを意味します。

于 2009-08-24T16:07:59.500 に答える
1

私はこの垂直方向のセンタリングの問題に一度遭遇し、すべてのブラウザーで正しく機能させるために、javascript / jQuery に頼りました。

$(document).ready(function() {
    $('img').each(function() {
        image_height = $(this).height();
        margin_top = (200 - image_height) / 2;
        $(this).css('margin-top', margin_top + 'px');
    });
});

画像のサイズが html で指定されていない場合は、$(document).ready の代わりに $(window).load が必要になることに注意してください。

于 2009-08-24T17:19:53.693 に答える
1

少し前に同じことをする必要がありましたが、このリンクで適切な実装を見つけました。「画像のサイズを知らなくても、垂直方向と水平方向のdiv内で画像を中央に配置する」.

意図したとおりに機能します。

于 2009-08-24T15:14:15.110 に答える
0

使用してみましたか:

display:block;
margin-left:auto;
margin-right:auto;

ブロックレベルの要素を中央に配置する必要があります

于 2009-08-24T15:01:33.273 に答える
0

これは、必要なサイズに関係なく機能するソリューションです。縮小はするが拡大はせず、垂直方向と水平方向の中央に配置し、CSS のみを使用します。それを理解するのにしばらく時間がかかりました。

<img>a の中に入れて<div>、必要に応じて div を配置し (つまり、必要なサイズを指定し、position属性を設定してください)、これを適用します。

.mydiv > .myimg {
    vertical-align: bottom;
    max-height:     100%;
    max-width:      100%;
    position:       absolute;
    margin:         auto;
    top:            0;
    right:          0;
    bottom:         0;
    left:           0;
}
于 2013-12-18T07:33:24.867 に答える