img 태그에 대한 자세한 설명과 html의 이미지 크기 변경(그림)
- 黄舟원래의
- 2017-07-26 13:31:236671검색
1. 균일한 크기?
제 홈페이지에는 사진이 많은데 어떤 것은 크고 어떤 것은 작습니다. 큰 사진을 확대하면 모두 같은 크기가 될 것 같아요. 어떤 효과가 있는지 살펴보겠습니다.
아주 보기 흉하다는 걸 다들 아실 텐데요, 큰 것을 작은 것으로 바꿀 수 있는 방법이 없을까요?
<li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' 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='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>효과는 다음과 같습니다.
위 내용은 img 태그에 대한 자세한 설명과 html의 이미지 크기 변경(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.