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 question（JSFiddle）

>Another tricks

>Rundown of Handling Flexible Media

>Why Responsive Images Is So Hard

Answer 3

您可以通过将图像放在包装器元素中并将包装器和溢出属性的大小设置为隐藏来实现此目的，以便图像看起来被裁剪但未拉伸。

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

JavaScript将图像调整为宽高比

3 个答案: