自动双向拉伸/挤压/裁剪图像

Question

我有一个容器-DIV

• 高度：400px；
• 宽度：80%；

我有一组不同尺寸的图片。

如何指定图片：

• 始终保持其纵横比
• 始终填充容器 div
• 与容器 div 的中心对齐
• 当 div 比图像宽时
  • 图像的宽度被拉伸或挤压到 div-width
  • 图像的高度会自动裁剪以保持纵横比
• 当 div 比图片高时
  • 图像的高度被拉伸或挤压到 div 高度
  • 图像的宽度会自动裁剪以保持纵横比

这可能只使用 CSS（没有 JS）吗？ 如果更简单，JS 也是一种选择。 图片可以设置为背景，也可以设置为 div 内的显式 img 标签。

例子：

• 当窗口宽度为500px时，div为400px(W) & 400px(H)
  • 应将 1000 像素（宽）和 500 像素（高）的图像压缩为 800 像素（宽）x 400 像素（高），并从左侧和右侧裁剪 200 像素。
• 当窗口宽度为1500px时，div为1200px(W) & 400px(H)
  • 应将 1000 像素（宽）和 500 像素（高）的图像拉伸为 1200 像素（宽）x 600 像素（高），并且应从顶部和底部裁剪 100 像素。

拨弄：http://jsfiddle.net/fnbL757q/

HTML：

<div id="container">
    <img id="image" src="https://lh4.googleusercontent.com/-jKo72r_w7e4/UlFMCWDx-dI/AAAAAAAAIl0/whCcucpCc_I/s1024/IMG_5364_LQ.jpg" />
</div>

CSS：

#container {
    max-height: 400px;
    width: 80%;
    border: 1px solid black;
    margin: 0 auto 0 auto;
    overflow: hidden;
}

#image {
}

提前致谢。

Answer 1

你可以试试这样的：

#container-DIV {
    background-image:url('your_image.png');
    background-repeat:no-repeat;
    background-size:cover;
}

css规则background-size:cover会根据http://www.w3schools.com/cssref/css3_pr_background-size.asp：

将背景图片缩放到尽可能大，使背景区域完全被背景图片覆盖。背景图像的某些部分可能不在背景定位区域内可见

演示 JSFiddle：http://jsfiddle.net/lparcerisa/p3fxmh78/