html - 如何使图像高度适合容器但保持纵横比

Question

我有一个两列的部分，其中包括一个图像和一些并排的文本。我希望图像高度能够填充容器的其余部分，但如果不使图像不成比例，我似乎无法做到这一点。我试过适合对象，也试过最大宽度等都无济于事。非常感谢任何帮助，谢谢。

 #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>

Answer 1

您是否尝试过像这样将图像添加为背景图像？

.glasses-wrap{
  width:50%;
  background-image: url("https://images.unsplash.com/photo-1498440844592-7528421f9781");
  background-size: cover;
  background-position: center;
}

https://codepen.io/tommyskott/pen/YzzVxBL