Does anyone know how to make an image in a two-column section fill its container without becoming distorted? I've tried using object fit and adjusting max widths, but nothing seems to work. Any advice would be greatly appreciated. Thank you.
#section-3{
display: flex;
}
@media only screen and (max-width: 1244px) {
#section-3{
flex-direction:column;
}
}
.glasses-wrap{
width:50%;
}
@media only screen and (max-width: 1244px) {
.glasses-wrap{
width:100%;
}
}
.glasses-wrap img{
width: 100%;
max-width:100%;
display: block;
height:auto;
}
.text-wrap{
background-color:#191919;
width:50%;
color:white;
padding-left:100px;
padding-right:100px;
padding-top:100px;
padding-bottom: 100px;
display:flex;
flex-direction: column;
}
@media only screen and (max-width: 1244px) {
.text-wrap{
width:100%;
}
}
.text-wrap h1{
font-size:2.5em;
margin-bottom:45px;
font-family: 'Source Serif Pro', serif;
font-weight:500;
}
.text-wrap p{
column-count: 2;
color:#7E7E7E;
font-family:'Montserrat', sans-serif;
column-gap: 40px;
}
.text-wrap p:nth-child(1){
margin-bottom: 20px;
font-weight:600;
font-size: 0.8em;
}
.text-wrap p:nth-child(3){
font-weight:500;
font-size:14px;
line-height: 2;
}
@media only screen and (max-width: 1342px) {
.text-wrap p {
column-count: 1;
}
} <section id="section-3">
<div class="glasses-wrap">
<img src="public/images/glasses.jpg">
</div>
<div class="text-wrap">
<p> GOURMET FOOD</p>
<h1>A Dining Experience</h1>
<p>Praesent fermentum ligula in dui imperdiet, vel tempus nulla ultricies. Phasellus at
commodo
ligula. Nullam molestie volutpat sapien, a dignissim tortor laoreet quis. Class aptent taciti
sociosqu ad litora torquent per conubia nostra. Phasellus at commodo ligula. Nullam molestie
volutpat
sapien, a dignissim tortor per inceptos himenaeos laoreet quis. Class aptent taciti soci osqu
ad
litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</section>