gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 12:34:54 25 4
gpt4 key购买 nike

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

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

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

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

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

最佳答案

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

时它会起作用
background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;

Demo

关于javascript - 裁剪和保持宽高比时适合的 CSS/Javascript 图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21816066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com