CSS-图片显示固定大小不压缩、不变形

link管理

链接快照平台

简单介绍一下background-size：

background-size: contain; 自动调整缩放比例，保证图片始终完整的显示在背景区域，不裁剪图片

background-size: cover; 对图片进行等比缩放，如有溢出部分则会被裁剪隐藏

话不多说，直接上代码：

1	<div class="bgc"></div>

.bgc {
	width:500px;
	height: 500px;
	background: url("images/1.jpeg") no-repeat center;
	background-size: cover;
}

1	<img src="images/1.jpeg" class="img">

.img{
	width:500px;
	height: 500px;
	object-fit: cover;
  flex: 1;
}

发布时间: 2020年04月19日 - 17:04

最后更新: 2020年04月19日 - 18:04

推荐文章

另类的冲锋衣 · vue中css实现炫酷多屏实现效果demo - CSDN文库

1 周前

2 月前

腹黑的足球 · MySQL 使用正则查询 | 新手教程

2 月前

气势凌人的跑步鞋 · Java 异常 java.net.UnknownHostException 的原因和解决方案-阿里云开发者社区

3 月前

想出家的海龟 · 预见2024：《2024年中国碳酸锂行业全景图谱》(附市场规模、竞争格局和发展前景等)_行业研究报告 - 前瞻网

4 月前

狂野的啤酒 · 南京市有轨电车交通管理办法

5 月前