У меня проблема с настройкой трех изображений одинакового размера. Моя проблема в том, что у меня есть три изображения. Два имеют одинаковый размер, а средний - другой. Я попытался настроить таргетинг на элемент, обратившись к моему классу, а затем к элементу изображения.
У меня было рабочее решение, которое центрирует все три элемента и не ломается ни в одном режиме, просто используя img и ничего больше. Но затем компания lo go наверху домашней страницы ломается.
Я тоже пробовал использовать высоту, но потом вспомнил, что она ломается при изменении размера.
***.new-row {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
text-align: center;
margin: auto;
justify-content: center;
}
.test {
display: grid;
width: auto;
height: 700px;}
.new-row:hover {
transition-duration: 200ms;
transition: all;
cursor: pointer;
opacity: 100%;
}
/* Commercial Text */
.top-left-column:hover {
opacity: 96%;
display: inline-block;
vertical-align: middle;
overflow: hidden;
color: #f8f8f8;
}
.top-right-column:hover {
opacity: 96%;
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
overflow: hidden;
color: #f8f8f8;
}
.bottom-left-column:hover {
opacity: 96%;
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
color: #f8f8f8;
}
.new-row div {
display: flex;
width: 40%;
justify-content: center;
flex-direction: column;
padding-bottom: 40px;
opacity: 85%;
}
/* Text */
.container-text {
color: white;
text-transform: uppercase;
text-align: center;
}
.new-row div {
width: 30%;
height: 70%;
}
/* Fix for res2 not being the same length as the others */
.new-row div .top-right-column {
height: inherit;
}
.center-text {
position: absolute;
display: grid;
text-align: center;
font-size: 50px;
font-family:'Poppins', sans-serif;
width: 25%;
}
Вот пример: https://codepen.io/gulam101/pen/jOWxdBQ
Кодовое слово не использует изображения, с которыми я пытаюсь работать, а просто тестовые изображения.