javascript - 裁剪和保持宽高比时适合的 CSS/Javascript 图像大小

Question

我有一个大小为 180x270 的 block ，我需要显示图像

图像大小可能会有所不同，我想确保它会扩展或缩小，以便较小的边框(高度或宽度)与 block 匹配，而较大的边框会在保持宽高比的同时被裁剪。

例子如下:- 将 360x600 的图像调整为 180x300，并将高度从 300 裁剪为 270- 将 100x135 的图像调整为 200x270，并将宽度从 200 裁剪为 180

基本上我想确保在扩展/缩小图像时没有空白区域，同时通过裁剪超出 block 的部分来保持纵横比

关于可以处理这个问题的 css 或 javascripts 有什么建议吗？

Answer 1

您似乎在寻找 background-size:cover，当图像是 background-image

时它会起作用

background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;

Demo