这个问题可能是由于浏览器不支持容器查询导致的。如果你使用的是Sass,可以通过安装sass-mq插件来解决这个问题。此外,你还需要改变你使用容器查询的方式。以下是一个示例代码,其中使用了sass-mq和容器查询:
在HTML中添加以下标记:
在SASS中添加以下样式:
@import 'mq';
$breakpoints: (
small: 600px,
medium: 800px,
large: 1000px
);
.picture {
img {
width: 100%;
height: auto;
}
@include mq($breakpoints) {
img {
width: auto;
height: 100%;
}
}
}
这个示例演示了如何使用sass-mq和容器查询来使图像在不同尺寸下具有不同的宽度和高度。在HTML中使用了
标签来提供针对不同屏幕宽度的不同图像源,而SASS中则定义了一个.picture
类,并在其中使用了img
标签的容器查询来定义不同屏幕尺寸下的宽度和高度。
上一篇:包含在Rails控制器中
下一篇:包含在头文件中定义的枚举”