html - 如何使两个图像具有固定高度和纯 CSS 响应？

Question

我想让这两个图像具有类似于 here 的固定高度响应。 .

我创建了 jsfiddle

换行符添加得太快了。我尝试添加 width=auto 但这没有用。此外，如果在一定宽度后它会变成单列，那将是很好的。

Answer 1

你问的不是很清楚，但有几种方法可以使图像以固定的高度和流动的宽度响应。

其中最简单的方法是使用 object-fit: cover 规则。尝试将 object-fit: cover 添加到您的 .image 元素。

https://www.w3schools.com/css/css3_object-fit.asp

这应该会强制它在不扭曲其尺寸的情况下填充其容器。

如果你想构建一个 2 列的网格，你需要使用 calc 设置容器的宽度，并移除所有偶数容器上的 margin-right。

.container {
  width: calc(50% - 10px);
  margin-right: 20px;
  float: left;
}

.container:nth-child(2n) {
  margin-right: 0;
}

.image {
  object-fit: cover;
  height: 412px;
}

我在这里修改了你的 js fiddle :https://jsfiddle.net/hnxz7co9/34/