图片大小自动按比例缩小图片不变形 解决方法

时间：2024-03-01 19:06:53


第一种，让图片和布局宽度高度成等比例，这样CSS设置死宽度和高度，图片也是等比例缩小，图片也不会变形。

比如淘宝，要求店铺主上传产品封面图片是正方形的，为什么，因为图片宝贝展示列表都是正方形的排版布局，这样要求上传合适正方形宝贝封面图片，也是让图片不变形。

所以有条件的情况下，大家将首页、图片列表页的布局宽度高度保持一致，上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。

（div设置的宽高和img的宽高相同，但是请保持宽高比例一致，不然你的图片会变形）

第二种，使用CSS max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度，这样图片就会等比例缩放图片，然图片相对不变形清晰。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片按比例缩小</title>
    <style>
        *{margin:0; padding:0;}
        /*第一种方法*/
        .div1{
            width:270px;
            height:150px;
            margin: 100px 0;
        }
        .div1 img{
            width:270px;
            height:150px;
        }
        /*第二种方法*/
        .div2{
            width: 640px;
            height:300px;
            overflow: hidden;
            margin: 100px 0;
        }
        .div2 img{
            max-width:640px;
            /*这个值可以更大，但是超过div的话图片就只能显示部分*/
            width:pxpression(this.width>300?300px:this.width);/*兼容IE6*/
        }
    </style>
</head>
<body>
<img src="http://wapfile.desktx.com/pc/170104/bigpic/5865fc0eaf108.jpg" alt="">
<!--第一种方法-->
<div class="div1">
    <img src="http://wapfile.desktx.com/pc/170104/bigpic/5865fc0eaf108.jpg" alt="">
</div>
<!--第二种方法-->
<div class="div2"><img src="http://wapfile.desktx.com/pc/170104/bigpic/5865fc0eaf108.jpg" alt=""></div>

</body>
</html>


 





		

		
	

	
	










相关文章