JavaScript調整圖像與寬高比的大小

Question

我想將尺寸設為980：1000的圖像調整為1：1的寬高比，或者將尺寸為1500：900的圖像調整為16：9。 我怎樣才能做到這一點 ？ 我只希望圖像變小，以免它們被拉長（980：1000到例如980：980）。

Answer 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;
}

Answer 2

為什么不使用CSS？

響應圖像 ：

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

_

> StackOverflow問題 （ JSFiddle ）

>另一招

>處理柔性媒體的概要

>為什么響應式圖像這么難

Answer 3

您可以通過將圖像放置在wrapper元素內，然后將大小設置為wrapper並將其溢出屬性隱藏起來，以使圖像看起來被裁剪而不會拉伸。

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