Question

我正在构建一个即将推出的网站，我希望简化它 - 页面死点中的一个图像，可以扩展到不同的浏览器大小。我试图谷歌它，但没有一个解决方案给我我想要的结果。使用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%;
}

我调整浏览器大小时无法缩放...

Answer 1

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

<强> jsFiddle example

Answer 2

您可以使用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/

中心可扩展图像（用于极其简单的Web）

2 个答案: