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

【问题标题】：Scaling a centered image with window size使用窗口大小缩放居中的图像
【发布时间】：2023-03-30 04:47:01
【问题描述】：

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

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

【问题讨论】：

根据上下文，您可以考虑根据媒体查询断点设置图像分辨率
怎么样？对于任何无知，我深表歉意，我不是专业的编码员。

标签： css scale center scaling

【解决方案1】：

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

【讨论】：

谢谢！此处缩放效果很好，但图像未居中（水平和垂直）。
您可以添加或调整更多选项/属性，而不仅仅是上面示例中的宽度。例如，您可以使用问题中的 CSS 作为基础，然后使用 @media 查询调整宽度和边距/位置，以确保图像保持居中
更新了答案以包含一种使图像保持居中的方法
这就是我正在做的事情。谢谢！

【解决方案2】：

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

或者你可以在 css 中尝试这样的事情

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

【讨论】：

重叠发生在没有缩放，只有居中的情况下。理想情况下，缩放将防止任何重叠，因为居中的图像太小而无法与其上方的元素接触。尽管如此，我还是用百分比替换了我的宽度，图像移动到页面的左侧并且没有缩放。
解决此问题的另一种方法是对使用不同显示平台的媒体查询的图像使用响应能力
我认为您的定位正在损害您的形象。尝试使用不同的位置更改它们：属性。检查此以获取示例developer.mozilla.org/en-US/docs/Web/CSS/position
都试过了，没有这样的运气。