Как перекрывать адаптивные фоновые изображения CSS [закрыто] ⇐ CSS

[Anonymous]

У меня возникла проблема с тем, чтобы два изображения были адаптивными и имели правильное соотношение сторон. В настоящее время изображения не отображаются, но когда я экспериментировал с добавлением фиксированной ширины и высоты, это работало, но мне это не нужно, потому что тогда оно не реагирует.
Я хотел бы установить max-width и max-height для первого (w: 526px, h: 521px) и второго изображения (w: 308px, h: 412px), чтобы они не становились слишком большими на больших экранах.
Эти два изображения являются фоновыми, и я не знаю, в этом ли проблема или в чем-то другом, но я не совсем понимаю.

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

import React, { useState } from "react";
import styled from "@emotion/styled";

const navigationDefault = [
{
media: [
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://plus.unsplash.com/premium_photo-1673461703605-0c6cc77e1a35?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
{
backgroundColor: { key: "--color-background-1" },
backgroundImage: {
src: "https://images.unsplash.com/photo-1448375240586-882707db888b?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "First image",
},
},
],
},
];

const BlockWrapper = styled("div")`
width: 100%;
height: 500px;
display: flex;
border: 1px solid blue;
`;

const HeadingWrapper = styled("div")`
margin-bottom: 38px;
`;

const LinkWrapper = styled("div")`
padding-bottom: 16px;
`;

const Links = styled("div")``;

const MediaWrapper = styled("div")``;

const BackgroundWrapper = styled("div")`
display: none;
max-width: 100%;

&.show-media {
display: block;
position: absolute;

&:first-child {
left: 50%;
width: 100%;
padding-top: 100%; /* 1:1 aspect ratio */
z-index: 1;
border: 1px solid red;
}

&:last-child {
width: 30%;
padding-top: 45%; /* 2:3 aspect ratio */
z-index: 2;
border: 1px solid green;
}
}
`;

const Background = styled("div")`
background-image: url(${(props) => props.src});
background-size: cover;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
`;

export default function App() {
const defaultMediaId = "default-media";
const [activeId, setActiveId] = useState(defaultMediaId);

const handleMouseEnter = (id) => setActiveId(id);
const handleMouseLeave = () => setActiveId(defaultMediaId);

const renderMedia = (media, id) => (

{media &&
media.map((mediaItem, index) => (



))}

);

return (



Heading
{navigationData.map(({ id, src, label }, index) => (

[url={src}
active={activeId === id}
onMouseEnter={() =] handleMouseEnter(id)}
onMouseLeave={handleMouseLeave}
>
{label}
[/url]

))}

{navigationDefault.map((defaultMedia, index) =>
renderMedia(defaultMedia.media, defaultMediaId)
)}


);
}

Есть советы?
Вот моя песочница, если она чем-то поможет, и вот схема того, как я пытаюсь ее выглядеть:
Дизайн макета
Я безуспешно пытался изменить CSS на сетки, флексбоксы и простое позиционирование. Это работает при установке изображений фиксированной ширины и высоты, но мне это не нужно.

Подробнее здесь: https://stackoverflow.com/questions/786 ... images-css