Html 如何防止背景中的图像在模式模式下放大？_Html_Css_Bootstrap 4

Html 如何防止背景中的图像在模式模式下放大？

html css bootstrap-4

Html 如何防止背景中的图像在模式模式下放大？,html,css,bootstrap-4,Html,Css,Bootstrap 4,我有4张图片和一张背景图片，我为每一张都写了一个模式。当我点击图像并以模态模式打开时，背景图像也会放大一点。在chrome开发工具中，我看到在主体中添加了一个名为.modal open的新类，并在css中添加了属性和值 body.modal-open { padding-right: 16px; display: block; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } 如何防止body元素背景中的图像放大

我有4张图片和一张背景图片，我为每一张都写了一个模式。当我点击图像并以模态模式打开时，背景图像也会放大一点。在chrome开发工具中，我看到在主体中添加了一个名为.modal open的新类，并在css中添加了属性和值

body.modal-open {
padding-right: 16px;
display: block; }


.modal-open .modal {
overflow-x: hidden;
overflow-y: auto; }

如何防止body元素背景中的图像放大？

CSS

.bg-image {
    background-image: url("Pictures/English-lang-background.jpg");
    background-size: cover;
    overflow: auto;
}

HTML

正确，@iamwhitebox。它解决了这个问题

您可能应该向主体添加另一个容器，并在该容器上设置背景图像，而不是主体本身。我认为这是因为页面滚动条。如果您想编辑，您可以添加精确的背景大小，例如下面的代码

背景大小：calc（100vh-20px）这只是一个肮脏的css技巧，用于响应。我认为@iamwhitebox的答案非常有效。我想用滚动条实现这个技巧也是有意义的。我没有理由不使用它，但它可以兼容不同的浏览器，如IE浏览器版本。
<body>
<div class="bg-image">

</div>
</body>