img 태그에 대한 자세한 설명과 html의 이미지 크기 변경(그림)-HTML 튜토리얼-php.cn

img 태그에 대한 자세한 설명과 html의 이미지 크기 변경(그림)

黄舟

풀어 주다： 2017-07-26 13:31:23

원래의

6670명이 탐색했습니다.

1. 균일한 크기?

제 홈페이지에는 사진이 많은데 어떤 것은 크고 어떤 것은 작습니다. 큰 사진을 확대하면 모두 같은 크기가 될 것 같아요. 어떤 효과가 있는지 살펴보겠습니다.

아주 보기 흉하다는 걸 다들 아실 텐데요, 큰 것을 작은 것으로 바꿀 수 있는 방법이 없을까요?

<li><img src=&#39;http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg&#39; width=400px height=400px /></li>

로그인 후 복사

렌더링은 다음과 같습니다.

사진이 너무 작다면 어떨까요? 너무 커져서 못생겼어요! ! ! 작은 것을 더 크게 만들지 않고 큰 것을 더 작게 만드는 방법이 있습니까?

<!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>

로그인 후 복사

효과는 다음과 같습니다.