所以我在网站上显示了YouTube视频缩略图,但它们似乎在顶部和底部都有信箱。我需要裁剪这个,但由于设计的复杂性,我不能只裁剪x个像素。
如何根据宽度动态裁剪图像?在调整大小期间我是否必须使用Javascript?或者有更简单的方法吗?
答案 0 :(得分:0)
我有类似的问题。我通过将图像绘制到画布上来解决它,迭代像素行并检查它们是否是黑色的。第一次检测到彩色像素标记了信箱的边缘。我使用此信息裁剪图像并将其绘制到另一个画布。
这不是一个完美的解决方案,但它对我有用。我希望这会有所帮助。
答案 1 :(得分:0)
您可以使用object-fit
css但it's not full browser compatible,但polyfill存在
否则,您可以将div与背景图像一起使用,background-size
与cover
或contain
一起使用better support