如何使图像高度适合容器，但保持宽高比

问题描述 投票：0回答：2

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

 #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>
html css responsive aspect-ratio
2个回答
0
投票

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

.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

0
投票

您可以使用此代码（对象适合：包含；）

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Demo</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    
    #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;
      background-position: top center;
      background-size: cover;
      object-fit: contain;
    }
    
    .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;
      }
    }
  </style>
</head>

<body>
  <section id="section-3">
    <div class="glasses-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAtvFcFI8b-wn7jGSsslqDJfUmZjCv4RaZxnFBrsaPWndmlCSd&s">
    </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>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.