jquery - 双向自动图像拉伸(stretch)/挤压/裁剪

Question

我有一个容器DIV

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

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

我如何指定图像:

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

仅使用 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 像素(高)的图像拉伸(stretch)为 1200 像素(宽)x 600 像素(高)，并从顶部和底部裁剪 100 像素。

fiddle :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 :

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

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