如何让图像不滚动？

我想知道如何使图像不滚动页面的其余部分。但是，我希望图像具有一定的宽度百分比，并且浏览器会自动计算高度以显示图像，并且自动配置的图像高度也会确定父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/但有图像大小和位置divs我现在拥有它吗？我在网站上还有其他的东西，它不得侵入，这不是唯一的东西，所以。

我试过背景图片的东西，使用固定的，绝对的，但都没有工作。我需要浏览器根据给定的宽度百分比进行一些数学运算，以使图像看起来不错。

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

编辑：事情是，我需要图像作为宽度和高度的占位符，所以父div的大小。背景图片不提供占位符。此外，我需要图像不显示在其父div之外。

来源

2017-07-04 Eliter

不要使用''尝试使用'背景image'，'背景sizing'和'背景attachment' –

请先问谷歌。我在第一次尝试中发现它。 https://www.w3schools.com/cssref/pr_background-attachment.asp – only4

这里是一个解决方案：

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

来源

2017-07-04 06:36:36

你将不得不使用背景附件属性

固定这个关键字意味着后台固定关于的视。即使元素具有滚动机制，“固定”背景也不会随元素一起移动。

，而不是添加img标签的HTML，CSS使用添加背景图像的包装类在这种情况下.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属性指定背景图像的大小。图像的大小可以完全受到限制，或仅部分地保留其内在比例。

来源

2017-07-04 06:53:08 lakov

如何让图像不滚动？

回答

相关问题