Home > Article > Web Front-end > Detailed explanation of img tag and changing image size in html (picture)
Detailed explanation of img tag and changing image size in html (picture)
- 黄舟Original
- 2017-07-26 13:31:236617browse
1. Uniform size?
There are many pictures on my webpage, some are large and some are small. I think if the pictures are zoomed in, all of them will be the same size. Let's see what the effect is.
Everyone can see that it is very ugly, so I wonder if there is a way to change the big one into a small one?
<li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=400px /></li>
The rendering is as follows:
But what if the picture is too small? It will be enlarged, so ugly! ! ! Is there any way to make the big ones smaller without making the small ones bigger?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>食物详情</title>
</head>
<body>
<ul>
<li><img name="pic" src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' /></li>
<li><img name="pic" src='http://baike.soso.com/p/20090711/20090711101754-314944703.jpg' /></li>
<li><img name="pic" src='http://img2.3lian.com/img2007/19/33/005.jpg' /></li>
<li><img name="pic" src='http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg' /></li>
<script type="text/javascript">
function setImg(w, h){
alert("111");
//var imgList = document.getElementsByTagName('img');
var imgList = document.getElementsByName("pic");
for(var i=0;i<imgList.length;i++){
alert("222");
if(imgList[i].width>w || imgList[i].height>h){
imgList[i].width = w;
imgList[i].heigth = h;
}
}
}
setImg(400,400);
</script>
</ul>
</body>
</html>The effect is as follows:
The above is the detailed content of Detailed explanation of img tag and changing image size in html (picture). For more information, please follow other related articles on the PHP Chinese website!