网页中如何使尺寸大于容器的图片在容器中居中

Question

网页中，想要排列一组图片的缩略图。现存放图片的容器尺寸已知（譬如50X50px），图片缩略代码已完成，缩略后得到的是一边满足长度要求一边超出长度要求的图片（譬如50X60px；60X50px之类）。求问如何实现图片在容器中居中显示，超出部分隐藏。求指教下具体代码，感激不尽。

Answer 1

提供几个方法：

1. 最简单的方法是 将图片写到父层的background-image中，设置background-position: center;

2. 如果一定要用<img .../>的写法，先设定父层容器overflow:hidden; 然后可以使用脚本处理图片居中(假设父层是li)：

$('li > img').each(function(){
  $(this).css(
    'margin-left' : '-' + ($(this).width() / 2) + 'px'
  )
})