0

私は近日公開予定の Web サイトを構築していますが、それをシンプルにしたいと考えています。ページの真ん中に 1 つの画像を配置し、さまざまなブラウザー サイズに合わせて拡張できます。私はそれをグーグルで検索しようとしていますが、どのソリューションも私が望む結果をもたらしません。max-width を使用すると、ピクセル単位で負のマージンを使用しているため、奇妙な結果が得られます。そのため、画像をスケーリングすると、それらのマージンは適用されません。

中央に配置したい画像は700x700ピクセルです。

どんな助けでも歓迎します:)

これは私の現在のページです: http://jsfiddle.net/EYL5U/

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}

img {
position: absolute;
top: 50%;
left: 50%;
width: 700px;
height: 70px;
margin-top: -350px;
margin-left: -350px;
max-width: 100%;
}

ブラウザのサイズを変更しても拡大縮小されません...

4

2 に答える 2

4 
img {
    position:absolute;
    margin:auto;
    top:0;bottom:0;left:0;right:0;
}

jsFiddle の例

于 2013-11-08T15:01:15.743 に答える
0

css メディア クエリを使用してそれを行うことができます。

img {
        position:absolute;
        margin:auto;
        top:0;bottom:0;left:0;right:0;
        max-width: 640px;
}

@media screen and (max-width: 640px) and (max-aspect-ratio: 1920/1200) {
    img {
        position:absolute;
        margin:auto;
        top:0;bottom:0;left:0;right:0;
        width: 100%;
    }
}

@media screen and (max-height: 400px) and (min-aspect-ratio: 1920/1200) {
    img {
        position:absolute;
        margin:auto;
        top:0;bottom:0;left:0;right:0;
        height: 100%;
    }
}

私の例では、画像の寸法は 1920x1200 であるため、画像の比率とサイズを調整する必要があることは明らかです。

作業サンプル: http://jsfiddle.net/A4rWW/

于 2013-11-08T15:05:23.923 に答える