如何让img里的图片自适应div,并填充不变形?

<div>
    <img src="..." alt="image">
<div>

img如何随父元素div改变尺寸,填充整个img,并且不变形?
就是background-size: cover;的感觉。

或者保持不变形,只显示图片的一部分也可以?

谢谢大家。
阅读 92.9k
5 个回答

img标签在固定高宽的div里的显示,除了JS,以及背景图片,可以试一下使用css属性object-fit属性。
它的几个属性

fill(不保持纵横比缩放图片,使图片完全适应)
contain(保持纵横比缩放图片,使图片的长边能完全显示出来)
cover(保持纵横比缩放图片,只保证图片的短边能完全显示出来)
none(保持图片宽高不变)
scale-down(当图片实际宽高小于所设置的图片宽高时,显示效果与none一致;否则,显示效果与contain一致)
inherit
initial
unset

设置 img width 或者 height 100%
另一个不设置,img 会按比例缩放

将图片设置为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);
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏