此着陆页的最终目标是让两张图片并排显示，高度均为 100%，宽度均为 50%，保持纵横比并 overflow hidden 。
这看起来应该非常简单，但无论我如何尝试，我都遇到了问题。
此刻我得到了以下信息:
<head>
<link rel="stylesheet" href="Stylesheets/default.css">
</head>
<body>
<div class="page">
<div class="img-wrapper">
<a href="pol.html"><img src="Images/cal-engel-531490-unsplash.jpg"></a>
</div>
<div class="img-wrapper">
<a href="biz.html"><img src="Images/rawpixel-660717-unsplash.jpg"></a>
</div>
</div>
</body>
.page {
width: 100%;
height: 100vh;
white-space: nowrap;
}
.img-wrapper {
position: relative;
}
img {
float: left;
width: 50%;
height: 100vh;
}
这是实现了高度和宽度的目标，但到目前为止我的修补还没有让图像按比例调整并消除溢出。
我四处搜索，到目前为止没有找到解决这个问题的方法，如果我在某处错过了一篇非常明显的文章，我深表歉意。感谢您的帮助!
最佳答案
我只会制作它们的背景图片。这样就不用担心溢出了。在这里，我将 anchor 设置为 100% 的宽度和高度(其容器的宽度和高度，因此每个都是页面的 50%)，这似乎是您想要的。 background-position 将左右图像分别固定在右上角和左上角，cover 的 background-size 确保宽高比保持不变。请注意，如果您的图片的高度大于宽度，这可能不会达到预期的效果。
body {
margin: 0;
}
.page {
width: 100%;
height: 100vh;
font-size: 0;
display: flex;
flex-flow: row nowrap;
justify-content: stretch;
}
.img-wrapper {
flex: 1 1 50%;
}
.img-wrapper a {
display: block;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
}
.img-wrapper:first-child a {
background-image: url(https://picsum.photos/300/200);
background-position: top 0 left 100%;
background-size: cover;
}
.img-wrapper:last-child a {
background-image: url(https://picsum.photos/300/200);
background-position: top 0 right 100%;
background-size: cover;
}<body>
<div class="page">
<div class="img-wrapper">
<a href="pol.html"></a>
</div>
<div class="img-wrapper">
<a href="biz.html"></a>
</div>
</div>
</body>关于html - 两张图片，并排响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50997475/