> 웹 프론트엔드 > HTML 튜토리얼 > 【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose

【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 09:38:13
원래의
978명이 탐색했습니다.

本帖最后由 net_lover 于 2012-10-03 14:21:49 编辑

我想在网页上放图片,一排排图片,大小事200*200像素的

但是我现在有一个图片,是300*250像素的

我的想法是:把这个图片以200*200显示,但是有一个要求

就是不能做上下拉伸,那样很难看,我想要的是最大的那个压缩成200像素,另外的那个同比例压缩,然后多余的地方用空白表示就可以,我的意思能明白吧

就像下面这个链接里面的图片一样

http://www.laiko.net/pdlistone/products/7115373.html

代码应该如何写呢,谢谢大家了

就是同比例压缩后居中,多余的部分用空白显示,这样的一排排的图片排列会很好看

回复讨论(解决方案)

<script> <br /> function resizeImg(img) <br /> { <br /> if(img.width>200 || img.height>200) <br /> { <br /> if(img.width/img.height>1){ <br /> img.width = 200 <br /> } <br /> else <br /> { <br /> img.height = 200 <br /> } <br /> } <br /> } <br /> </script>

【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose

这个中间没有空白,只是实现了等比例缩放,你看一下,我的连接,
E章先生
<script> <br /> function resizeImg(img) <br /> { <br /> if(img.width>200 || img.height>200) <br /> { <br /> if(img.width/img.height>1){ <br /> img.width = 200 <br /> } <br /> else <br /> { <br /> img.height = 200 <br /> } <br /> } <br /> } <br /> </script>

【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose

本帖最后由 net_lover 于 2012-10-03 14:25:53 编辑

中间没有空白,只是实现了等比例缩放

没有空白,那肯定是把超出的截断了

等比例,要么空白,要么截掉,

没有其他效果

要截断,放置div
【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose

上面的判断就改成
img.width = 200

img.height = 200

谢谢你,但是我要的结果是这样的
1、等比例缩小
2、多余部分空白
3、你看一下,我发的网址,那个图片是等比例缩小过后的,然后上下都是空白,看到了吗
我就要这种效果,因为等比例后,还是不能做到长:宽是1:1,我就要1:1这个效果
然后居中,有什么办法吗?
中间没有空白,只是实现了等比例缩放

没有空白,那肯定是把超出的截断了

等比例,要么空白,要么截掉,

没有其他效果

要截断,防止

【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose

你既然有现成的对比,你看他的源代码不就明白了吗》

道理已经说明了,

等比例缩小
多余部分空白
都已经实现

上下都是空白

你设置容器上下居中即可,最简单方法是放入


有可能是我错了,但是我用了代码,的确不是这个效果
你既然有现成的对比,你看他的源代码不就明白了吗》

道理已经说明了,

等比例缩小
多余部分空白
都已经实现

上下都是空白

你设置容器上下居中即可,最简单方法是放入

怎么是不行的??

<!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"><script>function resizeImg(img){if(img.width>200 || img.height>200){if(img.width/img.height>1){img.width = 200}else{img.height = 200}}}</script><table style="border:1px solid red;"><tr><td style="text-align:center;vertical-align:middlee;width:200px;height:200px"><img  onload="resizeImg(this)" src="http://i1.sinaimg.cn/dy/2012/0925/U8843P1DT20120925164539.jpg"/ alt="【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose" ></td></tr></table><br/><table   style="max-width:90%"><tr><td style="text-align:center;vertical-align:middlee;width:200px;height:200px"><img  onload="resizeImg(this)" src="http://www.sinaimg.cn/dy/slidenews/1_img/2012_39/31171_198603_171991.jpg"/ alt="【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose" ></td></tr></table>
로그인 후 복사

非常感谢,还有一个问题












【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose 【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose 【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose 【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose 【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose 【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose 【国庆快乐,紧急求助】一个关于图片显示的问题_html/css_WEB-ITnose


上面是我的代码,但是一个横排的图片,每个中间都没有间隔
我想让他们有间隔,应该怎么办
怎么是不行的??HTML code
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script> <br /> funct…… <p class="sougouAnswer"> 这样 <br /> <table border="0" cellspacing="6" > <p class="sougouAnswer"> 谢谢你,我做到了,非常感谢,还有一个问题想请教你 <br /> http://www.mainlandchemical.com/chanpinmingxi.do?bianma=10210 <br /> 这个网页上面介绍产品的(右边)下划虚线是如何实现的,我看后台的代码是用table <br /> 但是引用的阿里巴巴的代码,太乱了,根本看不清楚,请问如何才能实现呢? <br /> 非常感谢E章兄 <br /> 这样 <br /> <table border="0" cellspacing="6" > <p class="sougouAnswer"> 下划虚线如何实现 <br /> <br /> css中可以定义线型 ,可选 none,dotted, dashed, solid, double。 </script>
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿