仅当宽度和高度都更改时才更改图像大小

【问题标题】：仅当宽度和高度都更改时才更改图像大小(Change image size only if both width and height are changed)
【发布时间】：2021-12-24 23:45:43
【问题描述】：

我有 background-image ，我需要通过自动缩放屏幕宽度和高度来更改 background-size 。

如果只有 div/window 的高度发生变化，图像保持不变。

如果窗口的高度和宽度同时改变，图像将被放大/缩小。

示例：

Change image size only if both width and height are changed

我应该在我的 CSS 中添加什么？

...
background-image: url('some-image.jpg');
background-repeat: no-repeat;
background-position: bottom center;
background-size: ??;
...

首先我想通过 min() 属性来计算它，但我没有正确编码。

【解决方案1】：

使用@media 规则。

@media screen and (max-width: 256px) and (max-height: 256px){
...{
background-size: Your Size; 
}
}

当浏览器窗口的宽度为 256px 或更小时，这应该将 img 的宽度和高度更改为 256px。