Wie stelle ich ein Bild auf der rechten Seite ein, das beim Öffnen auf dem mobilen Bildschirm nach unten geht? ⇐ HTML

[Anonymous]

Ich habe eine „Über uns“-Seite erstellt, auf der rechts auf der Seite ein Bild angezeigt werden soll, das bei Anzeige auf dem Telefon bis zum unteren Bildschirmrand reicht.
Hier ist die JS- und CSS-Datei der React-Komponente, die ich erstelle.
aboutUS.js

Code: Select all

import './AboutUs.css'
import TeamCard from '../../components/TeamCard'

export default function AboutUs() {
const members = [
{ name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' },
{ name: 'Bhavesh', link: 'https://developer.mozilla.org/en-US/', imageLink: 'https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg' }
]

return (


About Us
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam qui libero, nulla quo sequi doloribus dicta, ea similique voluptatum minus voluptates architecto beatae quam eum nam fugiat. Soluta, saepe ipsa?

{members.map((member, index) => )}

[img]https://cdn.pixabay.com/photo/2021/08/26/01/56/mountains-6574828__340.jpg[/img]

)
}

AboutUS.css

Code: Select all

.about-us-div{
color: white;
}
.content {
max-width: 600px;
margin: 30px 80px 60px;
}
.cc-cards{
display: flex;
flex-wrap: wrap;
margin-left: 60px;
margin-top: -20px;
}

@media(max-width: 710px){
.cc-cards{
justify-content: center;
padding-bottom: 30px;
}
}

Das Bild sollte auf der rechten Leerstelle platziert werden, wenn es auf einem größeren Bildschirm angezeigt wird, und unten auf dem Telefonbildschirm.
Hier ist das Beispiel mit nicht positioniertem Bild
Ich habe versucht, Flex auf dem übergeordneten Div zu verwenden, aber ich bekomme immer noch nicht, was ich wollte.