<div>
<img src="..." alt="image">
<div>
img如何随父元素div改变尺寸,填充整个img,并且不变形?
就是background-size: cover;的感觉。
或者保持不变形,只显示图片的一部分也可以?
谢谢大家。
<div>
<img src="..." alt="image">
<div>
img如何随父元素div改变尺寸,填充整个img,并且不变形?
就是background-size: cover;的感觉。
或者保持不变形,只显示图片的一部分也可以?
谢谢大家。
将图片设置为div的 background
, 并设置背景的位置为div的正中,然后设置背景的大小为 cover
.
div.img {
background: url("path/to/img") no-repeat center;
background-size: cover;
}
我的方法是保证图片是 100% 占满,然后用放大展示,放大的程度应该按需要设定
<div>
<img src="..." alt="image">
<div>
.div {
width:200px;
height:100px;
overflow:hidden;
}
.div img {
width:100%;
height:100%;
transform: scale(1.5);
}
5 回答1.3k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答1.4k 阅读✓ 已解决
3 回答2.1k 阅读✓ 已解决
4 回答2k 阅读
2 回答1.4k 阅读✓ 已解决
3 回答1.3k 阅读✓ 已解决
img标签在固定高宽的div里的显示,除了JS,以及背景图片,可以试一下使用css属性object-fit属性。
它的几个属性