Saya mencoba membuat pengaturan Flexbox yang terdiri dari dua elemen div yang keduanya mengambil 50% dari lebar layar secara merata.

Sisi kiri akan memiliki beberapa teks dan sisi kanan akan memiliki gambar yang hanya akan mengisi seluruh 50% dari lebarnya, mengecilkan gambar yang lebih besar jika perlu.

Apa cara terbaik untuk mencapai ini? Saya cukup baru di Flexbox.

.content{
    position: relative;
    display: flex;
    width: 100%;
    height: 600px;
}
.content div{
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.text{
    background-color: pink;
}
.image{
    background-color: paleturquoise;
}
<section class="content">
    <div class="text">
        <p>text goes here</p>
    </div>

    <div class="image">
        <img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
    </div>
</section>
0
rivia 20 November 2020, 05:10

1 menjawab

Jawaban Terbaik

Anda dapat membuat .image position: relative dan menyetel width gambar ke 100%:

.content{
    position: relative;
    display: flex;
    width: 100%;
    height: 600px;
}
.content div{
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.text{
    background-color: pink;
}

.image{
    background-color: paleturquoise;
    /* make the parent position relative */
    position: relative;
}

.image img {
  /* make the width of the image equal to the parent width */
  width: 100%;
}
<section class="content">
    <div class="text">
        <p>text goes here</p>
    </div>

    <div class="image">
        <img src="https://i.imgur.com/rcZLIwH.jpg" alt="image">
    </div>
</section>
1
Hao Wu 20 November 2020, 02:21