Make some text and image align with correct size-CodePudding

I'm trying create some kind of sections where you have some text on one side of the page and an image on the other side of the page. But I'm having trouble to make it have a good size, currently my image is too big so it looks kinda ugly. Does it depend on my image? Because I can reduce the height of the image but then the quality turns bad (See this for what I'm trying to achieve).

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%;
}

CodePudding user response：

I don't think I can do anything with the information you have given me, right now. If you could post something to give me some more info, I would be glad to help you!

CodePudding user response：

How about 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%;
}

CodePudding user response：

Maybe you can try this approach. Let me know

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

   </div>
        
</div>