js可以把一张图片等比例缩放到一个固定大小吗？

Question

比如说我有一张高清大图宽高(1540,1235)的，想要把它等比例放在一个div里，div的宽高为(1200,760)。怎么样可以保证它可以铺满整个DIV容器。

在网上看了很多等比例缩放图片，通过计算图片宽高与固定容器的宽高比的方式缩放，最终的大小都不能铺满整个DIV容器

Answer 1

你需要的应该不是 JS，而是 CSS。如果要保证纵横比同时充满的话，一方面可以用 background：

div {
  background: url(image.jpg)/cover;
}

也可以用 img + object-fit：

<div class="some-class">
  <img src="image.jpg">
</div>

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

原理是一样的。

Answer 2

等比缩放？还是既要等比又要铺满？？
img标签的话只设一个值，就是只设width的话height会跟着自动等比，只设height同理
background-image的话，只设background-size: 100%; 等于只设宽度，高度等比缩放，background-size: 100% 100%;的话 不按等比铺满

Answer 3

用css设置元素的背景图片

div{
background-image:url('xxx.gif');
background-repeat:no-repeat;
background-size:cover;
}

可以看看这个http://www.w3school.com.cn/cs...

Answer 4

object-fit: cover 或者是 background-size: cover 才是正道啊朋友。

Answer 5

等比例的情况下是background-size: cover,但是这样的话，如果div和 图片， 比列不一样，图片会有一部分显示不出来

Answer 6

div{

width:1200px;
height:760px;
background:url(image.jpg) no-repeat;
background-size:cover;

}