css – 在引导响应网格中裁剪图像到纵横比

问题:我正在尝试将图像放在Twitter的Bootstrap的 responsive grid system中,因此它们将被缩放到给定的空间中(对于不同设备,列的响应CSS大小会有所不同).我希望他们适应长宽比 – 让我们假设它是一个平方.

如果我想要通过Bootstrap重新定位图像以适应网格设计,则Standard CSS cropping technique不起作用.负边距仅用于切割顶部和底部 – 当图像的高度必须被剪切时,宽度保持不变(例如,将肖像图像放入正方形).

我发现this technique用于指定宽高比来剪切宽度,保持高度不变(将横向图像放入正方形)与Bootstrap的缩放效果很好.

The example (jsfiddle)的裁剪图像尺寸为1600×400和400×1600.到目前为止,我在当前的Chrome和Safari中检查过.编辑:修正为也可以在Firefox.

问题:如何以一种方式做到这一点:切割宽度和高度.如何在图像上任意裁剪,选择矩形,以便通过Bootstrap正确重新定标?
如果没有图像尺寸的先前知识,可以如何裁剪某些宽高比?

谢谢任何想法!

解决方法

如果您的解决方案只能在现代浏览器中运行,而且img标签不是强制性的,那么使用图像作为背景技术帮助我经常在响应式设计中.
您可以轻松地将背景放置在中央,使其适合其容器.

http://jsfiddle.net/willemvb/wAqSV/2/

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效