双向自动图像拉伸/挤压/裁剪-Java 学习之路

我有一个容器-DIV

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

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

我如何指定图像：

始终保持其纵横比
始终填充container-div
与container-div的中心对齐
当div是 wider 而不是图像时
图像的宽度被拉伸或挤压到div宽度
图像的高度会自动裁剪以保持纵横比
当div比图像 taller 时
图像的高度被拉伸或挤压到div高度
图像的宽度会自动裁剪以保持纵横比

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

例子：

当窗口宽度为500px时，div将为400px（W）和400px（H）
应将1000px（W）和500px（H）的图像压缩到800px（W）x 400px（H），并且应从左侧和右侧裁剪200px .
当窗口宽度为1500px时，div将为1200px（W）和400px（H）
1000px（W）和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 {
}

提前致谢 .

1 回答

0
你可以尝试这样的事情：
```
#container-DIV {
    background-image:url('your_image.png');
    background-repeat:no-repeat;
    background-size:cover;
}
```
根据http://www.w3schools.com/cssref/css3_pr_background-size.asp，css规则 background-size:cover 将：

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

演示JSFiddle：http://jsfiddle.net/lparcerisa/p3fxmh78/
回复于 2024-04-19T05:17:42+08:00

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

1 回答

相关问题