Question

img.logo {
    height: auto;
    width: auto\9; /* ie8 */
    left: 50%;
    margin-top: -250px;
    margin-left: -134px;
    position: absolute;
    top: 50%;
    resize: both;

这就是我正在使用的代码。它是调整大小和居中的组合，但它只是出于某种原因而居中。我需要缩放图像，因为它目前在非常小的浏览器尺寸上与页面的上部元素重叠。

Answer 1

使用简单的％来实现图像的宽度和高度，其余的将自动处理。我认为这里的重叠是因为图像试图保持与auto属性的比例。

否则你可以在css中尝试这样的事情

img.resize{
    width:60%; /* Use either % or px*/
    height: auto;
}

Answer 2

您可以尝试使用CSS媒体查询。基本上我们根据屏幕宽度/浏览器宽度定义断点，并相应地调整图像宽度。

img {
    width: auto;
    height: auto;
}
@media all and (max-width: 600px) {
    img { width: 500px; }
}
@media all and (max-width: 500px) {
    img { width: 400px; }
}
@media all and (max-width: 400px) {
    img { width: 300px; }
}
@media all and (max-width: 300px) {
    img { width: 200px; }
}
@media all and (max-width: 200px) {
    img { width: 100px; }
}

See this example

希望这可以满足您的需求

修改您甚至可以将上述建议与transform: translateX(-50%) translateY(-50%);结合使用，以使图像始终保持居中。例如：

img { position: absolute; left: 50%; top: 50%; width: auto; height: auto; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } @media all and (max-width: 600px) { ... } ...

Here's an example

使用窗口大小缩放居中图像

2 个答案: