在响应式设计中按比例裁剪图像?

时间:2015-02-16 00:44:44

标签: javascript html css image responsive-design

所以我在网站上显示了YouTube视频缩略图,但它们似乎在顶部和底部都有信箱。我需要裁剪这个,但由于设计的复杂性,我不能只裁剪x个像素。

如何根据宽度动态裁剪图像?在调整大小期间我是否必须使用Javascript?或者有更简单的方法吗?

2 个答案:

答案 0 :(得分:0)

我有类似的问题。我通过将图像绘制到画布上来解决它,迭代像素行并检查它们是否是黑色的。第一次检测到彩色像素标记了信箱的边缘。我使用此信息裁剪图像并将其绘制到另一个画布。

这不是一个完美的解决方案,但它对我有用。我希望这会有所帮助。

答案 1 :(得分:0)

您可以使用object-fit css但it's not full browser compatible,但polyfill存在

否则,您可以将div与背景图像一起使用,background-sizecovercontain一起使用better support