缩放图像以适应可用空间，同时防止裁剪答案

【问题标题】：Scale image to fit available space, while preventing cropping缩放图像以适应可用空间，同时防止裁剪
【发布时间】：2022-01-19 02:46:34
【问题描述】：

我有一个固定高度的容器，里面有两个 div，一个在另一个上面。

顶部 div 包含一个图像。

底部 div 包含可变数量的文本。文本越多，底部 div 越高，顶部 div 越短。

随着顶部 div 的扩大或缩小，我希望图像能够优雅地缩放

它保持其纵横比，
它没有被裁剪
它永远不会超过其固有的高度/宽度

关于最佳方法的任何想法？这是我到目前为止的代码。 https://stackblitz.com/edit/web-platform-vz3xhh

【问题讨论】：

标签： html css layout

【解决方案1】：

您可以将max-width:100%; 用于img 属性。而且您这里提到的图像尺寸非常小，因此图像不适合容器，您可以更改并尝试图像。

.container {
              border: 2px solid red;
              height: 402px;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
            }
            .container div {
              border: 5px dashed green;
            }
            .container div:first-child {
              max-width:100%;
              height: 100%;
              background-image: url(https://content3.jdmagicbox.com/comp/noida/p7/011pxx11.xx11.170809044019.f8p7/catalogue/sahoo-ji-veg-mart-noida-0gmaal31ny.jpg?clr=4f3917);
              background-repeat: no-repeat;
              background-position: center;
              
            }
            .container div:last-child {
              align-self: flex-end;
            }
            img.example1 {

              height: 100%;
              position: absolute;
              top:50%;
              left:50%;
              transform: translate(-50%, -50%);
            }

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <div></div>
      <div>
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        burgdoggen shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly. shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
      </div>
    </div>
  </body>
</html>

【讨论】：

感谢 @srinithi R 抽出宝贵时间，但图像仍然在您的解决方案中被裁剪。我希望图像不被裁剪。

【解决方案2】：

您可以使用background-position: cover;，它不会裁剪背景图像。我建议使用更大或更高分辨率的图像，因为实际上没有办法在 CSS 中缩放纵横比。尤其是当你的容器有 100% 时；宽度，我会确保图像很大。试试看吧！

.container {
              border: 2px solid red;
              height: 402px;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
            }
            .container div {
              border: 5px dashed green;
            }
            .container div:first-child {
              max-width:100%;
              height: 100%;
              background-image: url('https://content3.jdmagicbox.com/comp/noida/p7/011pxx11.xx11.170809044019.f8p7/catalogue/sahoo-ji-veg-mart-noida-0gmaal31ny.jpg?clr=4f3917');
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
              
            }
            .container div:last-child {
              align-self: flex-end;
            }
            img.example1 {

              height: 100%;
              position: absolute;
              top:50%;
              left:50%;
              transform: translate(-50%, -50%);
            }

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <div></div>
      <div>
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        burgdoggen shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly. shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
      </div>
    </div>
  </body>
</html>

编辑：高分辨率图像的示例。

.container {
              border: 2px solid red;
              height: 402px;
              display: flex;
              flex-direction: column;
              justify-content: flex-end;
            }
            .container div {
              border: 5px dashed green;
            }
            .container div:first-child {
              max-width:100%;
              height: 100%;
              background-image: url('https://ag.utah.gov/wp-content/uploads/2021/06/foodhub-e1623956166619.png');
              background-repeat: no-repeat;
              background-position: center;
              background-size: cover;
              
            }
            .container div:last-child {
              align-self: flex-end;
            }
            img.example1 {

              height: 100%;
              position: absolute;
              top:50%;
              left:50%;
              transform: translate(-50%, -50%);
            }

<html>
  <head>
    <meta charset="UTF-8" />
    <script src="script.js"></script>
  </head>
  <body>
    <div class="container">
      <div></div>
      <div>
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        Bacon ipsum dolor amet beef ribs ham hock picanha strip steak hamburger
        burgdoggen shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly. shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
        flank pork belly shankle. Doner sirloin sausage, tenderloin burgdoggen
        prosciutto pastrami jerky pancetta chislic drumstick beef andouille
      </div>
    </div>
  </body>
</html>

【讨论】：