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

分享于2022年07月17日 css electron responsive responsive-design responsive-images 问答
【问题标题】:仅当宽度和高度都更改时才更改图像大小(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。

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