整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
tml中img图片进行等比例缩放的实例代码
HTML中，要修改img元素定义的图片的大小，且是等比例缩放，不改变宽和高的比值，那么可以采用只设置img元素属性中width和height中的任何一个，不要同时设置两个即可实现img图片的等比例缩放效果。下面将通过两个实例来分别实现这两种方法。
为了可以与原图片的大小进行对照，下面的实例使用HTML的注释符号将等比例缩放的代码进行了注释，第一遍运行完之后，可以将第一行的代码删除（在线删除，因为这是一个在线编辑器），然后将第二行代码中的注释符号去除掉，接着再运行一遍看看等比例缩放的效果：
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->这边的代码与上面的几乎一样，只是将width的属性修改成为height的属性，如下：
<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->提示：如上面的两个实例，将width和height分别设置为50%都可以等比例缩放图片，但得到的图片的大小不一定一样。
当然了，如果要通过同时设置img图片的width和height两个属性来达到等比例缩放图片的话也是可以的，但是要先计算一下图片的宽度和高度的比例，之后再等比例缩放。
来源：笨鸟工具-璞玉天成，大器晚成
原文：html img图片等比例缩放的代码 | HTML教程
免责声明：内容仅供参考，不保证正确性
lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站页面</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
body {
background-color: #FFFFFF;
text-align: center;
font-family: "宋体";
font-size: 12px;
color: #575757;
}
#banner {
height: 210px;
width: 982px;
margin: 0 auto;
}
#menu {
height: 87px;
width: 982px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box">
<div id="banner"><img src="images/203.jpg" width="982" height="210" alt="banner" /></div>
<div id="menu"><img src="images/204.jpg" width="223" height="80" alt="gamestart" />
<img src="images/205.jpg" width="106" height="80" alt="menu1" />
<img src="images/206.jpg" width="102" height="80" alt="menu2" />
<img src="images/207.jpg" width="105" height="80" alt="menu3" />
<img src="images/208.jpg" width="100" height="80" alt="menu4" />
<img src="images/209.jpg" width="77" height="80" alt="menu5" />
<img src="images/210.jpg" width="86" height="80" alt="menu6" />
<img src="images/211.jpg" width="77" height="80" alt="menu7" />
<img src="images/212.jpg" width="106" height="80" alt="menu8" /></div>
</div>
</body>
</html>
根据我们的案例，边框、边界、边距都设置成0了，图片与图片之间还是有空隙，这是为什么呢？
记得之前解决的方法是，img标签符之间不要有空格或者回车。
就是写成这样的
还有些其他的方法，可以让其在水平方向上不留下空隙，也就是左右的空隙，比如
#menu { font-size:0;} //意思是父级元素的字体大小为0，img默认是根据父元素的baseline进行对齐的，把父元素的字体大小设置为0，就没有空隙了，作为子元素的img对齐相应的也就没有空隙了
#menu {letter-spacing:-600px}
般来说，我们在做banner切换的时候，经常用背景来代替插入img图片 ，但是图片有很好的伸缩性，但是插入背景却没有 ，如果能够让banner切换是背景图又能自适应屏幕宽高呢？ 其实有办法可以解决 ，用padding-bottom 可以解决。
我想起切版网几个月前给客户做的仿国外网站的web前端外包项目，刚好就用到了padding-bottom， 而它的原理很简单：
因为垂直方向的padding值，根据宽度的大小来计算的。
方法如下：
<style>
.wrap{
width: 100%;
}
.banner{
width: 100%;
max-width: 490px; /**图片的宽度不大于图片实际像素**/
height: 0;
max-height: 329px;
padding-bottom: 67.14%; /**根据图片高宽比计算*/
margin: 0 auto;
background: url("images/test.jpg") no-repeat center;
background-size: cover;
}
@media only screen and (min-width: 490px) {
/**屏幕大于490时，将背景框高度设置为图片高度的实际像素**/
.banner{
height: 329px;
padding-bottom: 0;
}
}
</style>
<div class="wrap">
<!--role属性 aria-label属性增强html的可读性，更语义化-->
<div role="img" aria-label="banner img" class="banner"></div>
</div>
转自切版网 （qieban.cn）
*请认真填写需求信息，我们会在24小时内与您取得联系。
