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

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