1、
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(window).on(\'load\',function(){ $(\'.imgs img\').each(function(){ var maxwidth=200; var maxheith=200; var radio=0; var width=$(this).width(); var height=$(this).height(); console.log(width+\'...\'+height);//641...429 console.log(); if(width>maxwidth){ radio=maxwidth/width; $(this).css(\'width\',maxwidth); $(this).css(\'height\',height*radio); height=height*radio; } if(height>maxheith){ radio=maxheith/height; $(this).css(\'height\',maxheith); $(this).css(\'width\',width*radio); width=width*radio; } }) }) </script> <style> img{ } </style> </head> <body> <div class="imgs"> <img src="img/641.jpg" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/641 (1).jpg" alt="" /> </div> </body> </html>
2、
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
overflow: hidden;
}
li {
float: left;
width: 25%;
list-style: none;
}
li>div {
width: 100%;
height: 0;
padding-bottom: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: block;
}
</style>
</head>
<body>
<div class="div">
<ul>
<li>
<div href="#" style="background-image: url(img/1.jpg) ;">
</div>
</li>
<li>
<div href="#" style="background-image: url(img/2.jpg) ;">
</div>
</li>
<li>
<div href="#" style="background-image: url(img/3.jpg) ;">
</div>
</li>
<li>
<div href="#" style="background-image: url(img/3.jpg) ;">
</div>
</li>
</ul>
</div>
</body>
</html>