滚动 ASP.NET MVC 时的图像裁剪

Question

当数据大于实际页面时，我会进行图像裁剪（如果有意义的话）。当我滚动时，我希望图像始终位于背景中，无论它是否正在滚动。

红色圆圈是滚动时被裁剪的背景图像。绿色圆圈是特定产品的图像（它比页面长，因此存在滚动）。紫色圆圈（尝试快速说 5 遍）是我想要填充背景图像的空白区域。

这就是我到目前为止所做的：

img {
  max-width: 100%;
}

.img-details {
  height: auto;
  object-fit: contain;
}
 
.background-logo-login {
  isolation: isolate;
}

.background-logo-login::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.1;
  background-image: url(../img/SAS_web_2.jpg);
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: center;
  background-attachment: fixed;
  /* background-size: fixed; */
  /* background-size: 100% 100vh; */
  background-size: cover;
  /* overflow-y: auto; */
  /* background-size: contain; */
}

ProductDetails.cshtml

：

<div class="row">
    <div class="row">
        <div class="col-6 text-center">
            // Getting image from Azure Blob url
            <img class="img-details" src="@Model.ImageUrl" alt="">
        </div>
        <div class="col-6">
            // Other code
            
        </div>
    </div>
</div>

Answer 1

我找到了我想做的事情的解决方案。即使背景图像具有

background-attachment: fixed;

属性，当滚动存在时，它仍然在滚动。我发现的修复方法是添加

position: fixed;

确保显示的内容可以滚动，但背景图像不能滚动。

事后看来，这就是一行代码对我来说的作用：

.background-logo-login::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.05;
  background-image: url(../img/SAS_web_2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  height: auto;
  position: fixed; <--Adding this will set the background image fixed no matter if scrolling was present or not
}

希望这是有道理的！