Question

我有一个带

的容器-DIV

身高：400px;
宽度：80％;

我有一组不同大小的图像。

如何指定图像：

始终保持其宽高比
始终填写container-div
与container-div的中心对齐
当div比图像更宽时
- 图像的宽度被拉伸或挤压到div-width
- 自动裁剪图像的高度以保持纵横比
当div比图像更高时
- 图像的高度被拉伸或挤压到div-height
- 自动裁剪图像的宽度以保持纵横比

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

示例：

当窗口宽度为500px时，div将为400px（W）＆amp; 400像素（H）
- 1000px（W）＆amp;的图像500px（H）应该被挤压到800px（W）x 400px（H），并且应该从左侧和右侧裁剪200px。
当窗口宽度为1500px时，div将为1200px（W）＆amp; 400像素（H）
- 1000px（W）＆amp;的图像500px（H）应拉伸至1200px（W）x 600px（H），并且应从顶部和底部裁剪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;
}

根据{{3}}，

css规则background-size:cover：

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

演示JSFiddle：http://www.w3schools.com/cssref/css3_pr_background-size.asp

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

1 个答案: