Detailed explanation of img tag and changing image size in html (picture)

黄舟
Release: 2017-07-26 13:31:23
Original
6688 people have browsed it

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=&#39;http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg&#39; width=400px height=400px /></li>
Copy after login

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=&#39;http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg&#39; /></li>
		<li><img name="pic" src=&#39;http://baike.soso.com/p/20090711/20090711101754-314944703.jpg&#39; /></li>
		<li><img name="pic" src=&#39;http://img2.3lian.com/img2007/19/33/005.jpg&#39; /></li>
		<li><img name="pic" src=&#39;http://img.taopic.com/uploads/allimg/130501/240451-13050106450911.jpg&#39; /></li>
		<script type="text/javascript">
		function setImg(w, h){
			alert("111");
		    //var imgList = document.getElementsByTagName(&#39;img&#39;);
		    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>
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template