Entfernen Sie die Polsterung oder den Rand aus den Bildern, wenn der Bildschirm kleiner ist ⇐ CSS

[Anonymous]

I have CSS and HTML which when I have my screen full screen the image looks perfect:
Full Screen



But when I change the resolution to a smaller device, I get a border or Polsterung unter das Bild, das ich nicht entfernen kann. /> Ich habe versucht, randlos anzugeben, die Polsterung und andere Dinge anzupassen, um diesen nervigen Rand zu entfernen, aber für mich hat noch nichts funktioniert.

Code: Select all

.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>

[img]https://i.sstatic.net/V0LAKT9t.png[/img]