内容感知在运行时调整图像大小

时间:2014-06-03 05:19:55

标签: javascript css

我发现网站http://www.polygon.com/顶部的图片似乎已调整大小"内容感知"。看起来真的很好,他们是怎么做到的?

我唯一可以想象的是他们可以在画布上画一幅画,但我不确定。有人知道这件事会很好!

3 个答案:

答案 0 :(得分:1)

他们使用background-size: cover; background-position: center;存档结果。

答案 1 :(得分:1)

...你自己给出了答案,但仅供参考,因为其他答案也是正确的:

  • 几年前,你经常使用某种类似脚本的缩放/裁剪,如Backstretch
  • 如今,您依靠 background-size:cover 并使用polyfill for IE

有些用例需要脚本扩展:例如如果您想打印缩放图像或处理其他媒体,如视频iframe。

答案 2 :(得分:0)

这称为响应式设计。你可以在这里阅读更多相关信息:

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

看起来他们在响应式设计(媒体查询)之上使用CSS overflowlefttop控件