Looking for something like this我想把两个图像放在顶部，第二个放在底部，宽度为100％。和文字写在图像上。
<div>
<a href=""><img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.vox-cdn.com%2Fthumbor%2FPkmq1nm3skO0-j693JTMd7RL0Zk%3D%2F0x0%3A2012x1341%2F1200x800%2Ffilters%3Afocal(0x0%3A2012x1341)%2Fcdn.vox-cdn.com%2Fuploads%2Fchorus_image%2Fimage%2F47070706%2Fgoogle2.0.0.jpg&imgrefurl=https%3A%2F%2Fwww.theverge.com%2F2015%2F9%2F1%2F9239769%2Fnew-google-logo-announced&docid=JWw0c9TecYe1RM&tbnid=5wK_L1umstSwXM%3A&vet=10ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhsKAEwAQ..i&w=1200&h=800&bih=625&biw=1366&q=google%20images&ved=0ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhsKAEwAQ&iact=mrc&uact=8"></a>
</div>
<div>
<a href=""><img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fpay.google.com%2Fabout%2Fstatic%2Fimages%2Fsocial%2Fog_image.jpg&imgrefurl=https%3A%2F%2Fpay.google.com%2Fabout%2F&docid=zmoE9BrSKYr4xM&tbnid=faVYp-YX1tMUxM%3A&vet=10ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhtKAIwAg..i&w=1200&h=630&bih=625&biw=1366&q=google%20images&ved=0ahUKEwjGyt2m9ZzhAhXEp48KHfBzBKsQMwhtKAIwAg&iact=mrc&uact=8"></a>
</div>
我得到两个宽度为100％的图像。
我需要头版上的两个图像。
请点击这里：
.img{
display:block;
position:relative;
}
.img img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
.img span {
position: absolute;
top: 50%;
right: 0;
left: 0;
text-align: center;
transform: translateY(-50%);
font-size: 30px;
}<div class="img">
<a href=""><img src="https://i.dailymail.co.uk/i/pix/2015/12/02/11/2EFC4AF400000578-3342478-image-a-13_1449054494559.jpg"></a>
<span>Demo text</span>
</div>
<div class="img">
<a href=""><img src="https://i.dailymail.co.uk/i/pix/2015/12/02/11/2EFC4AF400000578-3342478-image-a-13_1449054494559.jpg"></a>
<span>Demo text</span>
</div>我想这就是你可能在寻找的东西：
注意：仅为了显示文本而添加文本的白色
h1{
position: relative;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%);
font-size: 30px;
color:#fff;
}
div{
background: url('https://thought-leadership-production.s3.amazonaws.com/2016/10/28/14/29/18/d9cc4e0b-ba5c-44b6-9b4d-5feffab18b26/tnc_56094809_preview_cropped.jpg');
text-align: center;
background-repeat: no-repeat;
height: 25rem;
background-size:cover
}<div>
<h1>Demo text</h1>
</div>
<div >
<h1>Demo text</h1>
</div>首先为你的width:100%;，height:100%;标签设置html和body，然后将你的div标签的高度设置为50%并通过css background属性设置你的图像，它工作正常我添加了下面的片段。
html,body{
width:100%;
height:100%;
box-sizing:border-box;
margin: 0;
}
div.img-container{
height:50%;
width:100%;
background-repeat:no-repeat;
background-size:contain;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
}
#img1{
background:url(https://www.w3schools.com/html/pic_trulli.jpg);
}
#img2{
background:url(https://www.w3schools.com/html/img_girl.jpg);
}<html>
<body>
<div id="img1" class="img-container">
<a href="">DEMO TEXT</a>
</div>
<div id="img2" class="img-container">
<a href="">DEMO TEXT</a>
</div>
</body>
</html>