网页中img图片使用css实现等比例自动缩放不变形（代码已测试）

时间：2026-09-15 15:50:01 编辑：袖梨来源：一聚教程网

这篇文章主要介绍了网页中img图片使用css实现等比例自动缩放不变形（已测试）的相关资料,需要的朋友可以参考下

网页中img标签图片排版在工作中经常会遇到，如果图片大小比例不一样，想整齐对应排列会让图片变形，本文介绍CSS如何实现图片等比例缩放不变形。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>等比例不变形</title><style type="text/css">.pic li{width: 150px; height: 80px; float: left; list-style: none; margin: 10px; border: 1px solid #d8d8d8; padding: 5px; text-align: center;}.pic img{width: auto; height: auto; max-width: 100%; max-height: 100%;}</style></head><body><div class="pic"><li><img src="https://www.*b*a*idu.com/img/flexible/logo/pc/result.png" ></li><li><img src="https://www.*j*b*51.net/images/logo.gif" ></li><li><img src="https://img.j*b**zj.com/image/sjb51-296-183.gif" ></li></div></body></html>

到此这篇关于网页中img图片使用css实现等比例自动缩放不变形（已测试）的文章就介绍到这了,更多相关css实现图片等比例缩放内容请搜索一聚教程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持一聚教程网！

推荐专题

最新下载

热门教程

网页中img图片使用css实现等比例自动缩放不变形（代码已测试）

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程