设置背景图片占满div且保持原有比例

您所在的位置：网站首页 › 背景铺满代码 › 设置背景图片占满div且保持原有比例

设置背景图片占满div且保持原有比例

2024-07-05 14:43| 来源: 网络整理| 查看: 265

原图：在这里插入图片描述设置div

.myDiv{ width:200px; height: 400px; border:1px solid red; background: url(./assets/img/tuzi.jpg) center no-repeat; background-size:100% 100%; }

效果在这里插入图片描述发现图片全部显示了不过会随div宽高变化发生挤压拉伸，但我想要保持原有比例，修改样式代码：

.myDiv{ width:200px; height: 400px; border:1px solid red; background: url(./assets/img/tuzi.jpg) center no-repeat; background-size:cover; background-position-y:top; }

效果在这里插入图片描述图片并没有全部显示，但能够保持比例不变

background-size:cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。 background-position-y:top; 从图片上边开始展示图片

【本文地址】

设置背景图片占满div且保持原有比例

设置背景图片占满div且保持原有比例

今日新闻

推荐新闻