Question

我想知道如何使图像不与页面的其余部分一起滚动。但是，我希望图像是宽度的一定百分比，浏览器会自动计算高度来显示图像，自动配置的图像高度也决定父div的高度。

以下代码允许我很好地定位图像区域并很好地调整实际图像的大小：

.popPictureParent {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.popPicture {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.popPicture img {
  display: block;
  width: 100%;
  height: auto;
}

<div class="popPictureParent" id="picture1">
  <div class="popPicture">
    <img src="./files/painting_scene_smaller.png" alt="painting scene" />
  </div>
</div>

如何使图像不与此网站类似的sccroll：https://www.thediyjoint.com/但具有图像大小和位置div我现在如何拥有它？我在网站上有其他东西，它不能介入，这不是唯一的，所以。

我尝试过使用固定的绝对的背景图像，但都没有工作。我需要浏览器做一些数学运算，根据给定的宽度百分比使图像看起来很好。

当我尝试背景时，没有选项可以将父级的div宽度设置为背景所需的宽度。这对我来说真是令人费解。如果需要更多信息，请发表评论。

编辑：问题是，我需要将图像用作宽度和高度占位符，因此父div会调整大小。背景图像不提供占位符。此外，我需要图像不显示在其父div之外。

Answer 1

这是一个解决方案：

.popPicture{
     background-image: url('./files/painting_scene_smaller.png');
     background-repeat: no-repeat;
     background-attachment: fixed;
  }

Answer 2

您必须使用背景附件属性

已修复此关键字表示后台已修复视口。即使一个元素有一个滚动机制，一个'固定' 背景不随元素移动。

在这种情况下，使用CSS将背景图像添加到包装类，而不是将img标记添加到HTML中.popPicture

例如：

.popPicture{
     background-image: url('/files/painting_scene_smaller.png');
     background-repeat: no-repeat;
     background-attachment: fixed;
}

您可以在此处详细了解此媒体资源：https://developer.mozilla.org/en/docs/Web/CSS/background-attachment

此外，根据您的使用情况，您可以调整背景大小属性

background-size CSS属性指定背景的大小图片。图像的大小可以完全约束或仅限制部分是为了保持其内在比例。

如何使图像不滚动？

2 个答案: