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

Posted

技术标签:

【中文标题】缩放图像以适应可用空间，同时防止裁剪【英文标题】：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

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于缩放图像以适应可用空间，同时防止裁剪的主要内容，如果未能解决你的问题，请参考以下文章

滚动视图平移防止捏手势？

如何防止网站在手机上显示裁剪图像？

具有固定背景的光滑滑块溢出，如何防止幻灯片上的图像裁剪？

创建一个带有缩放文本和图像以适应剩余空间的div？

裁剪图像，然后拉伸以填充可用空间

如何防止 Android 裁剪我的 ImageView？