javascript - 如何在 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');