使一些文本和影像以正確的大小對齊-有解無憂

我正在嘗試創建某種部分，其中頁面一側有一些文本，頁面另一側有影像。但是我很難讓它有一個好的尺寸，目前我的影像太大所以看起來有點難看。這取決于我的形象嗎？因為我可以降低影像的高度，但質量會變差（請參閱此內容了解我想要實作的目標）。

HTML

<div className='parcours_presentation'>
            <div className='col parcours_presentation-left'>
            <h1>PARCOURS STARTER</h1>
            <h3>Bilan sur 2 mois</h3>
            <p>
                this is some text
            </p>
            </div>
            <div className='col parcours_presentation-right'>
                <img src={radioImg} alt='img' />
            </div>
        </div>

CSS

.parcours_presentation{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 5%;
}
.parcours, p, h1, h3 {
    color: black;
}

img{
    max-width: 100%;
}

.col{
    width: 50%;
}

uj5u.com熱心網友回復：

我不認為我現在可以用你給我的資訊做任何事情。如果你能發布一些東西給我更多的資訊，我很樂意幫助你！

uj5u.com熱心網友回復：

怎么樣height: inherit;

.parcours_presentation {
    display: flex;
    width: 100%;
    max-height: 300px;
}

.parcours_presentation .col.parcours_presentation-right {
    height: inherit;
    padding: 30px;
}

.parcours_presentation .col.parcours_presentation-right img {
    object-fit: cover;
    object-position: center;
    height: 100%;
}

uj5u.com熱心網友回復：

也許你可以試試這種方法。讓我知道

.parcours_presentation{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    text-align:center;
    align-items: center;
    margin: 5%;
    background: rgb(105,27,173);
    background: linear-gradient(90deg, rgba(105,27,173,1) 37%, rgba(144,35,197,1) 69%, rgba(144,35,197,1) 93%);
}

.parcours, p, h1, h3 {
    color: black;
}

img{
    max-width: 100%;
    border-radius:20px;
    height:300px;
    width:300px;
    object-fit:cover;
}  



.parcours_presentation-right {
    display:grid
    justify-content:center;
    padding:10px;
    
}

<div class="parcours_presentation">
  <div >
  
     <h1> PARCOURS STARTER</h1>
     
     <hr>
        <h3>Bilan sur 2 mois</h3>
            <p> this is some text </p>
  </div>
            
   <div class="parcours_presentation-right">
      <img src="https://www.gardenia.net/storage/app/public/plant_family/detail/83649435_mOptimized.jpg"  style="float:left"/>

   </div>
        
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/466348.html

標籤：html css

上一篇：Flexbox在動態大小的父級中滾動溢位內容

下一篇：FacebookDIVS-個人資料頁面