如何在div中垂直居中图像？

Question

假设图像为100w x 300h。但我有一个总是100x100的div。我想使图像居中（以便顶部和底部被切断）

注意：高度始终是可变的。它并不总是300。

我怎样才能在JQuery中做到这一点？

Answer 1

为什么不将图像设置为div的背景属性？直接CSS解决方案，不需要js：

.cutoffAndCentered { width: 100px; height: 100px; background: url('image.jpg') no-repeat center center; }

或者你总是可以通过jQuery做同样的事情：

$('.myDiv').css('background','url(image.jpg) no-repeat center center');

Answer 2

你应该使用display：table-cell和overflow：hidden; 本教程应该有助于http://www.brunildo.org/test/img_center.html