0

我正在建立一个即将推出的网站，我想让它变得简单 - 页面中心的一个图像，可扩展到不同的浏览器大小。我试图用谷歌搜索它，但没有一个解决方案能给我想要的结果。使用 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 回答