如何在CSS宽度计算中使用@media Width实现图片宽度动态计算？

错误原因 #

你原来的代码存在语法错误：calc() 函数里不能直接使用 @media(width)，@media 是用来定义媒体查询规则的语法，不属于可用于数值计算的表达式，浏览器无法解析这种写法。

正确解决方案 #

方案1：用视口单位直接计算（推荐）

使用 100vw 代表视口总宽度（1vw = 视口宽度的1%），结合 calc() 实现动态计算，同时用 max() 避免宽度出现负数：

.banner-image-side {
  width: max(0px, calc((100vw - 1527px) / 2));
}

当视口宽度小于1527px时，宽度会被限制为0，避免负数值导致布局异常。

方案2：结合媒体查询控制

如果需要在不同屏幕宽度下有不同表现，可以用媒体查询拆分逻辑：

/* 视口宽度≥1527px时应用计算宽度 */
@media (min-width: 1527px) {
  .banner-image-side {
    width: calc((100vw - 1527px) / 2);
  }
}

/* 视口宽度<1527px时设置默认宽度 */
@media (max-width: 1526px) {
  .banner-image-side {
    width: 0; /* 可根据需求替换为其他值，比如100% */
  }
}

内容的提问来源于stack exchange，提问作者hatchtag