我想让这两个图像以类似于here 的固定高度响应。
我创建了jsfiddle
不知何故，换行符添加得太快了。我尝试添加 width=auto 但这不起作用。此外，如果在一定宽度后它会变成一列，那就太好了。
【问题讨论】：
display: flex 并设置flex-wrap: wrap。如果您希望图像随容器缩放并根据显示宽度在每行显示不同数量的图像，我相信您需要设置每行宽度的图像媒体查询。
标签： html css responsive-design
不清楚您在问什么，但有几种方法可以使图像具有固定高度和流动宽度。
其中最简单的方法是使用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 小提琴：https://jsfiddle.net/hnxz7co9/34/
【讨论】：
实际上，当您的图像告诉显示块和高度一些值时，您最声明 宽度：自动
当您告诉图像宽度某个值时，然后告诉高度自动。
当您打破此选项时，您的图像会拉伸，您需要一侧费高度或宽度。
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
}
.site-content {
position: relative;
}
.max-column {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.container {
width: 42%;
height: 412px;
display: inline-block;
overflow: hidden;
margin-bottom: 20px;
margin-right: 20px;
line-height: 0px;
position: relative;
}
.image {
opacity: 1;
display: block;
height: 412px;
width: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
opacity: 1.0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.container:hover .middle {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
} <div class="site-content max-column">
<div class="container">
<img src="https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg" alt="Avatar" class="image">
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg" alt="Avatar" class="image">
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<img src="https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg" alt="Avatar" class="image">
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
</div>==谢谢==
【讨论】：
您的图片没有排成两行的原因是您没有为它们留出足够的空间来执行此操作。您已将图像宽度设置为 48%。如果将图像之外的所有水平边距和水平填充相加，您会发现它们加起来超过可用宽度的 4%，因此您的第二张图像会跳到下一行。我在您的 jsfiddle 中发现，将图像宽度更改为 47%，或将右边距更改为 10px，或将右边距更改为 1%，每行允许两个图像。
如果您将宽度表示为百分比，将内边距和边距表示为像素，则必须计算所涉及的总像素，并确保有足够的空间让两个图像放在一条线上。为此，您可以使用 Daniel Bernardi 的回答中的 calc() 函数，或者如果您希望边距随图像大小一起调整大小，您可以将它们设置为百分比而不是硬像素值。
至于在较小的屏幕上更改为每行一张图像，我将从阅读 @media 开始。这允许您为不同尺寸的屏幕设置不同的 CSS 规则。因此，如果您的屏幕小于某个尺寸，请将图像的宽度设置为 100% 减去填充和边距。
【讨论】：
@media 注释是我需要阅读的下一个关键字，再次感谢。
你必须使用背景图片而不是图片
<div class="site-content max-column">
<div class="container">
<div class="image img1"></div>
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<div class="image img2"></div>
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
<div class="container">
<div class="image img3"></div>
<div class="middle">
<div class="text">
<h1>Works</h1>
<p> Is the music</p>
</div>
</div>
</div>
</div>
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
}
.site-content {
position: relative;
}
.max-column {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.container {
width: 48%;
height: 412px;
display: inline-block;
overflow: hidden;
margin-bottom: 20px;
margin-right: 20px;
line-height: 0px;
position: relative;
}
.image {
opacity: 1;
display: block;
height: 412px;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
opacity: 1.0;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.container:hover .middle {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
padding: 16px 32px;
}
.img1{
background: url('https://images.freeimages.com/images/large-previews/10f/autumn-1-1382513.jpg');
background-size: cover;
background-position: center;
}
.img2{
background: url('https://images.freeimages.com/images/large-previews/e01/lrt-interior-1626389.jpg');
}
.img3{
background: url('https://images.freeimages.com/images/large-previews/035/young-golden-retriever-1404848.jpg');
background-size: cover;
background-position: center;
}
【讨论】：