Question

我有一个简单的网站/ html页面，其中应显示一个图像和一些按钮。但是图片大小应遵循以下规则：

较短的边不应显示超过600像素
图像高度应最大为窗口的80％，以便无需滚动即可为UI提供空间
图像宽度应达到窗口的100％
图像不应放大显示
图像的长宽比不应改变

关于尺寸较短的规则：尺寸较短时，我指图像的高度或宽度（以像素为单位），具体取决于数量较小的那个。因此，如果图像为2000x1200，则应以1000x600显示，因此较短的尺寸为600。但是，具有1200x88888的图像也将显示为600x44444像素。

这是我尝试过的。我调整了所有图像的大小，使其较短的尺寸为600像素或更短。但是图像仍然多样，图像可能是3000x600，也可能是100x3000或100x100。

在我尝试的代码中：

<div style="max-height: 80%">
  <img style="margin: 0px auto; display: block; height: 100%;" src="http://www.dummyimage.com/800x200/000/fff&text=image">
</div>

但是这对我不起作用，因为如果80％的窗口高度大于图像，则图像的尺寸会增加。

这里有30％的小提琴，而不是80％的小提琴：http://jsfiddle.net/ErNeT/2723/

Answer 1

如果没有JavaScript，就不可能确定图像是纵向还是横向（以确定较短的一面）。所以：

$(window).on("load", function() {
  $("img").each(function() {
    if (this.naturalWidth >= this.naturalHeight) {
      $(this).addClass("landscape");
    } else {
      $(this).addClass("portrait");
    }
  });
});

body {
  margin: 0;
}
.demo {
  position: relative;
  height: 100vh;
  background-color: peachpuff;
}
.demo:nth-of-type(even) {
  background-color: papayawhip;
}
.demo::before {
  position: absolute;
  content: attr(title);
}
/* style used on page load */
img {
  max-width: 100vw;
  max-height: 80vh;
}
/* classes added by JavaScript */
img.landscape {
  max-width: 100vw;
  max-height: 600px;
}
img.portrait {
  max-width: 600px;
  max-height: 80vh;
}
/* 600px is greater than 80vh for screen shorter then 750px so... */
@media screen and (max-height: 750px) {
  img.landscape {
    max-height: 80vh;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="demo" title="Shorter side test (landscape)">
  <img src="http://www.dummyimage.com/1000x700/ccc/000"></div>

<div class="demo" title="Shorter side test (portrait)">
  <img src="http://www.dummyimage.com/700x1000/ccc/000"></div>

<div class="demo" title="Viewport width and height test">
  <img src="http://www.dummyimage.com/2400x2400/ccc/000"></div>

<div class="demo" title="No stretch test">
  <img src="http://www.dummyimage.com/200x200/ccc/000"></div>

缩放宽度和高度受多个约束的图像

1 个答案: