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

Posted 2023-03-22

【中文标题】仅当宽度和高度都更改时才更改图像大小

【英文标题】：Change image size only if both width and height are changed

【发布时间】：2021-12-24 23:45:43

【问题描述】：

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

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

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

示例：

我应该在我的 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。

【讨论】：

此方法不可扩展，我正在使用相对屏幕尺寸。我正在寻找一些自动缩放解决方案。