Изображения, на которые я ссылаюсь, можно увидеть здесь:
У меня есть настраиваемое поле / макет Wordpress, в котором используется стандартная настройка блока «Функции» для отображения 3 боксов рядом, которые будут связаны с 3 различными меню.Все 3 (включая div, которые их содержат) имеют одинаковые назначенные классы.И несмотря на то, что термины «сетка» распространяются на все классы CSS, в этом разделе не используется сетка 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>