Удалить набивку или границу с изображений, когда экран меньше ⇐ Html

[Anonymous]

у меня есть это в моем html: < /p>




data-aos-delay="100" style="height: 100%; position: relative;">





< /code>
И у меня есть это в моем CSS: < /p>
.hero {
width: 100%;
height: 100vh;
min-height: calc(100vh - 92px);
position: relative;
padding: 60px 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.hero img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

.hero:before {
content: "";
background: transparent;
background: color-mix(in srgb, var(--background-color), transparent 100%);
position: absolute;
inset: 0;
z-index: 2;
}

.hero .container {
position: relative;
z-index: 3;
}

.hero h2 {
margin: 0;
font-size: 64px;
font-weight: 700;
}

.hero p {
margin: 5px 0 0 0;
font-size: 36px;
font-weight: 600;
}

.hero p span {
letter-spacing: 1px;
font-size: 80px;
font-family: 'League Spartan', sans-serif;
}

.hero-text {
position: absolute;
top: 78%;
left: 50%;
transform: translateX(-50%);
width: max-content;
text-align: center;
white-space: nowrap;
overflow: visible;
color: #a8d4e7;
}

/*--------------------------------------------------------------
# iPhone Section
--------------------------------------------------------------*/

/* iPhone SE */
@media (min-width: 370px) and (max-width: 380px) and (max-height: 670px) {
.hero img { object-fit: cover; height: auto; border: none;}
.hero p span { font-size: 20px; }
.hero-text { top: 12%; }

}

/* iPhone XR */
@media (max-width: 414px) and (max-height: 896px) {
.hero img { object-fit: cover; height: auto; border: none;}
.hero p span { font-size: 20px; }
.hero-text { top: 12%; }
}

/* iPhone 12 Pro */
@media (max-width: 390px) and (max-height: 844px) {
.hero img { object-fit: cover; height: auto; border: none;}
.hero p span { font-size: 20px; }
.hero-text { top: 12%; }
}

/* iPhone 14 Pro Max */
@media (max-width: 430px) and (max-height: 932px) {
.hero img { object-fit: cover; height: auto; border: none;}
.hero p span { font-size: 20px; }
.hero-text { top: 12%; }
}

< /code>
Когда у меня есть полный экран, изображение выглядит идеально: < /p>
Полный экран < /p>
Но когда я изменяю разрешение на меньшее устройство, я получаю границу или накладку под изображением, которое я не знаю, как удалить. Похоже, я не знаю, как это исправить.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... is-smaller