Я не могу получить цвет фона изображения, чтобы не переполнить ниже контейнера изображения ⇐ CSS

[Anonymous]

Я пытался установить разные высоты для. Единственная вещь, которая сработала,-это установление гибкого базиса на 0% в. PrettyPrint-Override ">

Код: Выделить всё

*,
*:before,
*:after {
box-sizing: border-box;
}

* {
padding: 0;
margin: 0;
}

.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100dvh;
background-color: hsl(233, 47%, 7%);
}

.card-container {
background-color: hsl(244, 38%, 16%);
max-width: 67em;
border-radius: .5rem;
height: 50%;
overflow-y: hidden;
display: flex;
align-items: center;
}

.card-container * {
flex-basis: 50%;
}

.card-content {
padding: 4rem;
}

.card-content>*+* {
margin-top: 2rem;
}

img {
display: block;
max-width: 100%;
margin-inline: auto;
}

h1 {
color: white;
margin-bottom: 2rem;
font-weight: bolder;
font-size: 2.5rem;
}

.desc {
color: hsla(0, 0%, 100%, 0.75);
margin-bottom: 4rem;
font-size: 1.2rem;
}

span {
color: hsl(277, 64%, 61%);
}

.stats {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 3.75rem;
}

.stat-number {
color: white;
font-size: 1.6rem;
font-weight: 900;
}

.stat-desc {
color: hsla(0, 0%, 100%, 0.75);
margin-top: .5rem;
text-transform: uppercase;
font-size: .8rem;
}

.card-image {
position: relative;
}

.card-image::after {
content: "";
width: 100%;
height: 100%;
background: hsla(277, 94%, 49%, 0.323);
position: absolute;
inset: 0;
}

@media (max-width: 820px) {
.card-container {
flex-direction: column-reverse;
height: 90%;
width: 85%;
}

.card-container * {
flex-basis: 0%;
}

.card-content {
padding-top: 1rem;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 1.5rem;
text-align: center;
}

}< /code>


.attribution {
font-size: 11px;
text-align: center;
}

.attribution a {
color: hsl(228, 45%, 44%);
}





Get insights that help your business grow.
Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.



10k+
companies

314
templates

12M+
queries




[img]./images/image-header-desktop.jpg[/img]
 

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