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

Question

我有一个带的容器div

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

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

如何指定图像：

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

这可能只使用CSS（没有JS）吗？如果更容易的话，JS也是一个选项。图像可以设置为背景，也可以设置为div内的显式img标记

示例：

• 当窗口宽度为500px时，div将为400px（W）&400px（高）
  • 1000px（W）&500px（H）应压缩为800px（W）x400px（H
• 当窗口宽度为1500px时，div将为1200px（W）&400px（高）
  • 1000px（W）&500px（H）应该被拉伸到1200px（W）x 600px（L），100px应该从顶部和底部裁剪

在：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/