我正在参考的图像可以在这里看到：
我有一个Wordpress自定义字段/布局，它使用标准的功能框设置来并排显示3个框，这些框将链接到3个不同的菜单。所有3个（包括包含它们的div）都分配了相同的类。尽管所有网格类都散布着“网格”术语，但本节中没有使用CSS网格或flexbox。每个图像文件的尺寸也相同。
起初我以为这是一个问题，第三个图像只是被前两个图像推下，然后稍微拉伸以填充一些可用空间，但是如果将窗口缩小到移动大小，则第三个图像仍会保留不同的比例。当我将包含的父div设置为最大宽度为30％时，也是如此。所有3张图片都显示在同一行上，但是第三张图片仍然比其高。
关于第三张图片为什么会流氓的任何想法？
（注意：当我在布局中添加第4个框时，它会在流氓框下方的新行中显示，但其大小和比例与前2个框相同。）
/**/
/* menus grid */
/**/
.menus-grid {
position: relative;
margin-bottom: 4rem;
text-align: center;
}
.menus-grid__head {
margin: 0 auto 2rem;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 2.4rem;
line-height: 1.125;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.menus-grid__item {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
margin-bottom: 2rem;
}
.menus-grid__item img {
vertical-align: top;
}
.menus-grid__title {
position: absolute;
top: 50%;
left: 50%;
width: 280px;
padding: 1rem 0;
background-color: rgba(255,255,255,0.75);
box-shadow: 0 0 0 0 rgba(255,255,255,0.75);
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.625rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.025em;
transform: translate(-50%, -50%);
transition-duration: 0.4s;
}
.menus-grid__details {
position: absolute;
top: 45%; /*changed from 50% to 45% for better button spacing*/
right: 1.25rem;
left: 1.25rem;
opacity: 1; /*changed from 0 to 1 to enable button to appear by default*/
/*transform: translateY(-50%); removing for menu page */
transition-duration: 0.25s;
transition-property: opacity;
}
.menus-grid__details h3 {
margin-bottom: 1rem;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1.625rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.025em;
opacity: 0;
transition-duration: 0.25s;
transition-property: opacity;
}
.menus-grid__details img {
margin-bottom: 1.25rem;
}
.menus-grid__button {
margin-top: 1.5rem;
}
.menus-grid__item:hover .menus-grid__title {
box-shadow: 0 0 0 20rem rgba(255,255,255,0.75);
color: transparent;
}
.menus-grid__item:hover .menus-grid__details h3 {
opacity: 1;
}
.menus-grid__circles {
position: absolute;
z-index: 1;
top: 8rem;
left: 50%;
width: 626px;
height: 626px;
margin-left: 8rem;
background: url(../img/menus-gallery/circles.png);
pointer-events: none;
}
.menus-grid__circles_b {
top: auto;
right: 50%;
bottom: -25rem;
left: auto;
margin: 0 12.5rem 0 0;
}
.menus-grid__circles_c {
top: -100px;
}
.button, .field-wrap input[type="button"] {
display: inline-block;
padding: 0.5rem 2.5rem;
border: 1px solid #789904;
background-color: #789904;
font-size: 1rem;
line-height: 1.5rem;
text-transform: uppercase;
color: #fff;
transition-duration: 0.25s;
cursor: pointer;
}
a {
text-decoration: none;
}
@media screen and (max-width: 1023px) { /* tablet */
.menus-grid__item img {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width: 599px) { /* mobile */
.menus-grid__details {
display: none;
}
.menus-grid__item:hover .menus-grid__title {
box-shadow: none;
color: inherit;
}
}<div class="menus-grid">
<div data-wow-duration="5s" class="menus-grid__circles wow rotateIn"> </div>
<div class="grid">
<h2 class="menus-grid__head">Menus</h2>
<div class="grid-row">
<div class="grid-col">
<div class="menus-grid__item">
<img src="https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/1_Brunch_500x660px-374x358.jpg" alt="" />
<h3 class="menus-grid__title">Brunch</h3>
<div class="menus-grid__details">
<h3>Brunch</h3>
<a class="menus-grid__button button" href="http://www.google.com" target="_blank">View Menu</a>
</div>
</div>
</div>
<div class="grid-col">
<div class="menus-grid__item">
<img src="https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/2_Lunch_500x660px-374x358.jpg" alt="" />
<h3 class="menus-grid__title">Lunch</h3>
<div class="menus-grid__details">
<h3>Lunch</h3>
<a class="menus-grid__button button" href="http://www.google.com" target="">View Menu</a>
</div>
</div>
</div>
<div class="grid-col">
<div class="menus-grid__item">
<img src="https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/3_Dinner_500x660px-501x358.jpg" alt="" />
<h3 class="menus-grid__title">Dinner</h3>
<div class="menus-grid__details">
<h3>Dinner</h3>
<a class="menus-grid__button button" href="http://www.google.com" target="">View Menu</a>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
您的第三个图片的宽度为501px，其他的为374px：
1_Brunch_500x660px-374x358.jpg
2_Lunch_500x660px-374x358.jpg
3_Dinner_500x660px-501x358.jpg
将第三个文件名更改为https://foodbytano.com/1556655652339/wp-content/uploads/2019/07/3_Dinner_500x660px-374x358.jpg
绝招..
关于html - 第三个图像(具有与第一个2相同的类/属性)的大小不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56909838/