我正在尝试创建一个页面，（水果的）图片将是页面空间的文件夹/下部的背景图片。它的范围应从开始到结束（宽度为100％，高度为30％左右）。我该如何运作？这是我的代码：
问题是，尽管水果的高度应仅为视图的30％，宽度不应为100％，但其图像仍保持巨大。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Links of sosial media -->
<a class="instagram" href="#">
<img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/38-instagram-256.png" width="35" height="35" alt=""></a>
<a class="facebook" href="#">
<img src="https://cdn3.iconfinder.com/data/icons/wpzoom-developer-icon-set/500/01-256.png" width="35" height="35" alt=""></a>
<a class="twitter" href="#">
<img src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/twitter-square-256.png" width="35" height="35" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="container">
<div class="main>
<h2 style="color: black" align="center"></h2>
<img src="https://cdn.pixabay.com/photo/2015/05/19/07/44/browser-773215__480.png" class="img-fluid" alt="Responsive image" width="317" height="250"/>
<b></b><b></b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacus eros, sodales vel facilisis at, sagittis vitae dolor. Nullam nec lacinia nibh, in dignissim ante. Cras ut egestas velit. Vestibulum ut porttitor quam. Sed dignissim ac lacus id ullamcorper.</p>
<p style margin-bottom:"6px">Check:</p>
<!-- Main-class ends below -->
</div>
<!--Footer-class starts. Height should be about 30% of the page view and width 100%. -->
<div class="footer">
<img src="https://cdn.pixabay.com/photo/2017/06/21/21/33/fruit-2428678__480.jpg" class ="img-fluid" alt="Responsive image">
</div>
</div>
</body>
</html>
下面是style.css文件。我试图使用此文件编辑图像。
h1{
}
#h1{
color:blue;
padding-bottom:30px;
font-family: CelebriSans;
}
h2{
font-family: CelebriSans;
margin-top:10px;
}
.navbar{
background-color:#c99ab1 !important;
height:11%;
}
.main{
height:60%;
width:100%;
}
p{
font-family: CelebriSans;
font-size:16px;
font-style:bold;
}
.footer{
margin-top:20px;
width:100%;
height:30%;
}
.footer .img-fluid{
margin-top:20px;
width:100%;
height:30%;
}
给图像一个ID
<div class="footer">
<img src="https://cdn.pixabay.com/photo/2017/06/21/21/33/fruit-2428678__480.jpg" class ="img-fluid" alt="Responsive image" id="test-img">
</div>
然后在CSS中，您应该能够根据需要更改其属性，例如]
#test-img {
height: 300px;
}