html图⽚怎么等⽐例缩放？htmlimg图⽚缩放⽅法总结（附实例）
本篇⽂章主要的介绍了关于html img标签图⽚的等⽐例缩放的介绍和使⽤实例，最后还有关于html img标签图⽚等⽐例缩放的总结，接下来让我们⼀起来看这篇⽂章吧
⾸先我们先看看html img图⽚如何等⽐例缩放：
在DIV CSS布局中对于图⽚列表或图⽚排版时，图⽚不是固定宽度⾼度⼤⼩，但图⽚占位是固定宽度⾼度，这个时候如果使⽤CSS固定死图⽚⼤⼩（宽度 ⾼度），这个时候如果图⽚相对于这个位置不是等⽐例⼤⼩，那么这张图⽚就会变形，让图⽚变的不清晰，这个时候想让图⽚不变形⼜按⽐例缩放，如何解决？CSS图⽚缩⼩不变形，图⽚⾃动缩⼩，图⽚按⽐例等⽐例缩⼩不变形解决。
html img标签图⽚缩放的解决⽅法有两种：
⼀、让图⽚和布局宽度⾼度成等⽐例，这样CSS设置死宽度和⾼度，图⽚也是等⽐例缩⼩，图⽚也不会变形。
⽐如淘宝，要求店铺主上传产品封⾯图⽚是正⽅形的，为什么，因为图⽚宝贝展⽰列表都是正⽅形的排版布局，这样要求上传合适正⽅形宝贝封⾯图⽚，也是让图⽚不变形。
所以有条件的情况下，⼤家将⾸页、图⽚列表页的布局宽度⾼度保持⼀致，上传图⽚时候将图⽚先进⾏处理为布局宽度⾼度时等⽐例放⼤尺⼨的。
⼆、使⽤CSS max-width和max-height实现图⽚⾃动等⽐例缩⼩
很简单我们要使⽤到max-width和max-height，这样即可设置对象图⽚最⼤宽度和最⼤⾼度，这样图⽚就会等⽐例缩放图⽚，然图⽚相对不变形清晰。
以下DIVCSS5通过实例对⽐⽅法让⼤家掌握CSS控制图⽚缩⼩不变形技巧。
接下来看关于html img图⽚缩放的案例：
这⾥有个DIV盒⼦（DIV class命名为"tupian"）CSS宽度和CSS⾼度⽅便为300px和100px同时设置1px⿊⾊边框，⾥⾯放了⼀张图⽚（图⽚原始宽度650px为⾼度为406px）。并通过CSS固定死图⽚宽度⾼度。
关于html img标签图⽚缩放的全部代码：
> <!DOCTYPE html>
>
> <html>
>
> <head>
>
> <meta charset="utf-8" />
>
> <title>图⽚缩⼩不变形实例 www.php</title>
>
> <style>
>
> .tupian{ border:1px solid #000; width:300px; height:100px}
>
> .tupian img{width:300px; height:100px}
>
> </style>
>
> </head>
>
> <body>
>
> <div class="tupian">
>
> <img src="img.jpg" />
>
> </div>
>
> </body>
>
jquery在线教程交流> </html>
代码因为没放图⽚就不显⽰效果了，可以⾃⾏脑补去。
通过CSS固定对象内图⽚⾼度宽度，这样图⽚如果不是等⽐例缩⼩，那么图⽚就变形了。
前⾯说的都差不多，现在来开始总结：
CSS DIV图⽚缩⼩不变形总结：最好解决⽅法就是从设计图⽚本⾝出发，将图⽚设计成与布局中宽度
⾼度成等⽐例图⽚，⽐如你布局时候图⽚宽度为300px，⾼度为200px，那你设计图⽚素材时候提交添加的图⽚宽度⾼度本⾝可以为600px宽，400px⾼，或900px宽600px⾼，这样等⽐例的图⽚才能保证真正图⽚缩⼩后不变形，显⽰完整。
以上就是html图⽚怎么等⽐例缩放？html img图⽚缩放⽅法总结(附实例)的详细内容，更多请关注我
专门建⽴的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习⽅法和需要注意的⼩细节，互相交流学习，不停更新最新的教程和学习技巧（⽹页制作，⽹站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项⽬实战【视频＋⼯具＋系统路线图】全栈⼯程师学习路线以及规划都有整理，分享给⼩伙伴）点：