【国庆快乐，紧急求助】一个关于图片显示的问题

wipe_tear 2012-10-03 01:40:40
我想在网页上放图片，一排排图片，大小事200*200像素的

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

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

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

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

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

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

就是同比例压缩后居中，多余的部分用空白显示，这样的一排排的图片排列会很好看
...全文
102 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
碧海情天-赵亮 2012-10-03
  • 打赏
  • 举报
 回复
下划虚线如何实现

css中可以定义线型 ,可选 none,dotted, dashed, solid, double。
wipe_tear 2012-10-03
  • 打赏
  • 举报
 回复
谢谢你，我做到了，非常感谢，还有一个问题想请教你
http://www.mainlandchemical.com/chanpinmingxi.do?bianma=10210
这个网页上面介绍产品的（右边）下划虚线是如何实现的，我看后台的代码是用table
但是引用的阿里巴巴的代码，太乱了，根本看不清楚，请问如何才能实现呢？
非常感谢E章兄
[Quote=引用 9 楼 的回复:]

这样
<table border="0" cellspacing="6" >
[/Quote]
孟子E章 2012-10-03
  • 打赏
  • 举报
 回复
这样
<table border="0" cellspacing="6" >
wipe_tear 2012-10-03
  • 打赏
  • 举报
 回复
非常感谢，还有一个问题
<table style="border:0px solid red;">
<tr>
<td style="border:1px solid red;text-align:center;vertical-align:middlee;width:106px;height:106px"><img onload="resizeImg(this)" src="/mainland/images/flow1er1.jpg"/></td>
<td style="border:1px solid red;text-align:center;vertical-align:middlee;width:106px;height:106px"><img onload="resizeImg(this)" src="/mainland/images/flow1er1.jpg"/></td>
<td style="border:1px solid red;text-align:center;vertical-align:middlee;width:106px;height:106px"><img onload="resizeImg(this)" src="/mainland/images/flow1er1.jpg"/></td>
<td style="border:1px solid red;text-align:center;vertical-align:middlee;width:106px;height:106px"><img onload="resizeImg(this)" src="/mainland/images/flow1er1.jpg"/></td>
<td style="border:1px solid red;text-align:center;vertical-align:middlee;width:106px;height:106px"><img onload="resizeImg(this)" src="/mainland/images/flow1er1.jpg"/></td>
<td style="border:1px solid red;text-align:center;vertical-align:middlee;width:106px;height:106px"><img onload="resizeImg(this)" src="/mainland/images/flow1er1.jpg"/></td>
<td style="border:1px solid red;text-align:center;vertical-align:middlee;width:106px;height:106px"><img onload="resizeImg(this)" src="/mainland/images/flow1er1.jpg"/></td>
</tr>

</table>

上面是我的代码，但是一个横排的图片，每个中间都没有间隔
我想让他们有间隔，应该怎么办
[Quote=引用 7 楼 的回复:]

怎么是不行的？？HTML code
<!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>
funct……
[/Quote]
孟子E章 2012-10-03
  • 打赏
  • 举报
 回复
怎么是不行的？？
<!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"/></td></tr>

</table>

<br/>

<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://www.sinaimg.cn/dy/slidenews/1_img/2012_39/31171_198603_171991.jpg"/></td></tr>

</table>
wipe_tear 2012-10-03
  • 打赏
  • 举报
 回复
有可能是我错了，但是我用了代码，的确不是这个效果
[Quote=引用 5 楼 的回复:]

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

道理已经说明了，

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

上下都是空白

你设置容器上下居中即可，最简单方法是放入
<td style="vertical-align:middle"
[/Quote]
孟子E章 2012-10-03
  • 打赏
  • 举报
 回复
你既然有现成的对比，你看他的源代码不就明白了吗》

道理已经说明了，

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

上下都是空白

你设置容器上下居中即可，最简单方法是放入
<td style="vertical-align:middle"

wipe_tear 2012-10-03
  • 打赏
  • 举报
 回复
谢谢你，但是我要的结果是这样的
1、等比例缩小
2、多余部分空白
3、你看一下，我发的网址，那个图片是等比例缩小过后的，然后上下都是空白，看到了吗
我就要这种效果，因为等比例后，还是不能做到长：宽是1:1，我就要1:1这个效果
然后居中，有什么办法吗？
[Quote=引用 3 楼 的回复:]

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

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

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

没有其他效果

要截断，防止
<div style="overflow:hidden"><img
[/Quote]
孟子E章 2012-10-03
  • 打赏
  • 举报
 回复
中间没有空白，只是实现了等比例缩放

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

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

没有其他效果

要截断，放置div
<div style="overflow:hidden"><img


上面的判断就改成
img.width = 200
为
img.height = 200
wipe_tear 2012-10-03
  • 打赏
  • 举报
 回复
这个中间没有空白，只是实现了等比例缩放，你看一下，我的连接，
E章先生
[Quote=引用 1 楼 的回复:]

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

<img onload="resizeImg(……
[/Quote]
孟子E章 2012-10-03
  • 打赏
  • 举报
 回复
<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>

<img onload="resizeImg(this)"
青少儿编程-Python游戏一刻钟迎国庆套餐价特惠
针对青少儿编程-Python游戏一刻钟的套餐价-迎五一特惠 内部包括： 青少儿编程-Python游戏一刻钟（上）（中）（下） 价格更优惠。 1、本课程属于青少儿创意编程，以飞机大战的游戏为蓝本来教会孩子编写游戏 2、每章在...
免费发短信——“小熊”的速度好快啊！
１　小熊，是ＭＳＮ免费发短信的一个机器人，你只要在ＭＳＮ里添加　bear001@waplook.com 为联系人，注册一下手机，你就可以打ｈｅｌｐ　，按提示免费发短信了。　　小熊很可爱的，国庆节的时候还会在对话框里祝国庆快乐什么的。而且功能也在增加。现在提供搜铃服务了。　　最神奇的是，小熊办事效率高，我的小熊，添加联系人后不能正常显示，于是发了封ｍａｉｌ过去，一会就收到了回复： ==...
第一个工作单位的那些事
    从07年毕业至今,已经将近4年,换了两次工作,相对来说,第一个工作时间最长,3年半.也深刻感受到对于应届毕业生,第一个工作的重要性,第一个单位所在的行业的重要性,换工作易,换行业难.有个好的起点更难.    2007年7月,怀着对工作的憧憬与紧张,我来到了杭州新市街153号,工行软件开发中心报道,一切似乎进行得很顺利.经过两周的培训之后,进行了一次简单的测试考试.后来得知那次考试的成绩
JavaScript 中的 slice 方法详解：逐步学习和深度解剖
求位于先序序列中第k 个位置的结点的值 问题：求位于先序序列中第k 个位置的结点的值【问题描述】求位于先序序列中第k 个位置的结点的值【输入形式】先序序列构造二叉树，结点数据类型为字符型，空结点用'#快速入门 JavaScript 的 slice 方法：新手教 在 JavaScript 中，slice() 是一个常用的数组方法，用于从现有数组中提取一部分元素，然后返回一个新的数组。它是一个非常有用的工具，可以帮助你在不农发笔面经 笔
我在CSDN参与的3000个帖子
 今日偶然翻到，感慨万千 1：申述：版主，是否扣了我的专家分？ 2：100分急求，随机输出十个小写字母，但是，要求这十个字母不相同 3：求Sn=a+aa+aaa+…+aaa…a（n个a）之值 4：数组题 望高手帮忙！ 5：呵呵，来推荐一下我的网站，本站提供大量当今流行的免费的音乐和免费电影，常用软件、游戏、精美图库下载,希望对网友有帮助!顺便散分! 6：VBA请教怎
CSS

61,114

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章