css实现图片等宽高

最新推荐文章于 2023-09-30 09:42:03 发布

IT~少年人

最新推荐文章于 2023-09-30 09:42:03 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

文章标签：图片等宽高

本文链接：https://blog.youkuaiyun.com/qq_43634982/article/details/90608411

博客主要围绕在HTML页面中实现图片等宽高展开，介绍了相关的CSS代码，聚焦于前端开发中页面元素样式的设置，为解决图片宽高比例问题提供了技术思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 Html页面

<div style="width: 100px;">
			<div class="img_div">
				<img src="http://192.168.31.2:8801/uploads/home/common/default_goods_image.jpg">
			</div>
		</div>

2、css代码

.img_div {
				position: relative;
				width: 100%;
				height: 0;
				padding-top: 100%;
			}
			
			.img_div img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}