Question

我有一个照片灯箱，每张照片的高度为视口的85％。当窗口宽度太小时，图像被切断，因此它们的最大宽度为100％;

.modal-image {
    height: 85vh;
    max-width: 90%;
}

然而，当最大宽度开始时，图像会失真，因为高度保持85vh，而宽度随着屏幕宽度而变化。

除了最大宽度开始时，我怎么能将图像保持在85vh的高度，此时高度应该是动态的。

感谢您的帮助

Answer 1

更新：找到了另一种解决方案

简单地给图像一个宽度为85vh，高度为85vh的容器，并使用了object-fit：fill;这样图像可以正常缩放。

<div class="container">
        <img src="https://www.aussiespecialist.com/content/asp/en/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg" class="modal-image">
     </div>

     <style>

         .container {
             width: 100%;
             height: 100vh;
             padding: 100px;
             object-fit: contain;
         }

         .modal-image {
             width: 100%;
             height: 100%;
         }

     </style>

Answer 2

您必须查看哪个屏幕分辨率，窗口“变得”太小并创建特定于每种情况的css规则。例如：

<style>
    @media (max-width: 768px) {
      .modal-image {
          height: 85vh;
          max-width: 90%;
      }
    }
    @media (max-width: 1200px) {
      .modal-image {
          height: 85vh;
          max-width: 90%;
      }
    }
</style>

问候！

Answer 3

您可能有可能为图片使用容器，因此您可以设置容器中的max-width和图片上的height，如下所示：

div {
  max-width: 90%;
}

img {
  height: 85vh;
  object-fit: contain;
}

<div> <img src="https://pixar-community-production.s3-us-west-1.amazonaws.com/News/Effects_MTL_2018/rfm_rewrite.jpg" /> </div>

使用带有max-width的容器可以让我们拥有正确的宽度，然后在图像上使用height可以让图片动态计算其宽度而不会失去它的比例。

具有最大宽度和设置高度的图像

3 个答案: