JavaScript 将图像大小调整为宽高比

【问题标题】：JavaScript resize image to aspect ratioJavaScript 将图像大小调整为宽高比
【发布时间】：2016-07-19 00:12:30
【问题描述】：

我想将 980:1000 的图像调整为 1:1 的纵横比，或者将 1500:900 的图像调整为 16:9。我怎样才能做到这一点？我只希望图像变小，这样它们就不会被拉伸（980:1000 到例如 980:980）。

【问题讨论】：

【解决方案1】：

这是在浏览器中吗？最简单的方法可能是使用 background-size:cover。

http://css-tricks.com/perfect-full-page-background-image/

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：

【解决方案2】：

为什么不使用 CSS？

到响应式图片：

img {
    max-width: 100%;
    height: auto;
}

>StackOverflow question (JSFiddle)

>Another tricks

>Rundown of Handling Flexible Media

>Why Responsive Images Is So Hard

【讨论】：

【解决方案3】：

您可以通过将图像放置在 wrapper 元素中并将尺寸设置为 wrapper 并将溢出属性设置为 hidden 以使图像看起来被裁剪但未拉伸。

<div style="overflow:hidden; height:980px; width: 980px;" > <img src="img_1000x980.jpg" /> </div>

【讨论】：