Bootstrap手机图像放大

Question

手机上的封面图像放大了很多。下面的图片应该能告诉你我的意思。

这就是开发时的样子

这就是它在我的手机上的样子

html,
body,
.view {
height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 740px) {
html,
body,
.view {
height: 1000px;
}
a {
font-size: 3.5vh;
padding: 1.5vw;
}
.card {
width:100%;
}
}
@media (min-width: 800px) and (max-width: 850px) {
html,
body,
.view {
height: 600px;
}
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="view" style="background-image: url('https://wallpaperstream.com/wallpapers/full/space/Dark-Space-Wallpaper.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="cover-container ph-auto h-100 row align-items-center" style="width: 100%;">
<div class="cover-inner container content col text-center text-primary">
<h1 class="jumbotron-heading">Home</h1>
<p class="lead">Singing · Rapping · Screaming</p>
</div>
</div>
</div>

Answer 1

将此id添加到您的第一个div并删除内联样式

#background-image{
background-image: url('https://wallpaperstream.com/wallpapers/full/space/Dark-Space-Wallpaper.jpg');
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
background-size: cover;
background-position: 85% 50%;
background-repeat: no-repeat;
}

第一个div

<div class="view" id="background-image">

工作示例