关于可伸缩图片的实现方法?

igyhi 2008-09-11 01:48:15
一个窗体如下:
top.gif与foot.gif均为半圆角图片400*8

<div><img src="images/top.gif"/></div>
<div style="width:400px;height:100px"></div>
<div><img src="images/foot.gif"/></div>

假设以上窗体显示正常

那么将内容容器width缩短为200px
<div><img src="images/top.gif"/></div>
<div style="width:200px;height:100px"></div>
<div><img src="images/foot.gif"/></div>

在引用的半脚图片不变的情况下,如何缩短其宽度为200px?
关键是保留两端的半圆角。
图片最好是以实体存在,这样可以自适应容器
兼容FF&IE
...全文
260 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
igyhi 2008-09-23
  • 打赏
  • 举报
回复
re:XPingguo
还没有,=忙完这段时间在看看,在顶顶

XPingguo 2008-09-21
  • 打赏
  • 举报
回复
楼主要是解决了这个问题,麻烦发个信息给我,谢谢!
XPingguo 2008-09-21
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 mumuTiger 的回复:]
没有什么奇怪的,css sprite 在一张图上,postion背景定位而已
[/Quote]

能取图片一部分repeat吗
igyhi 2008-09-19
  • 打赏
  • 举报
回复
1
igyhi 2008-09-18
  • 打赏
  • 举报
回复
re:sjmlsxp

这样的方法做过,你要保存页面上这个图片,是不是有两张?
一张是 "图片另存为" 左圆角的哪个
另一张是 "背景另存为" 做为背景的哪个

但是,有更'先进'点的.

一个在页面上显示330*8的双圆角图片,只有一个"图片另存为"方式保存,下载后打开,实际大小是460*8.
很奇特
igyhi 2008-09-18
  • 打赏
  • 举报
回复
re:mumuTiger

你的意思是Css的clip?

1."postion背景定位而已",那张图不是"背景另存为"
2.那张图是一个460*8的整体上部分圆角图片,是常见的那种整体图片.你说的那种图片是类似QQ,yahoo,用的大背景图片吧,不一样
尽管这个整体图片也可以做clip切割,但为什么是图片另存为呢?

直接说吧,就是这张图片:http://www.kaixin001.com/i/h460_t.gif
jackyBody 2008-09-18
  • 打赏
  • 举报
回复
主要思想还是 取到左右圆角在大图中位置,中间取到1px重复 !一样的
jackyBody 2008-09-18
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 igyhi 的回复:]
re:sjmlsxp

这样的方法做过,你要保存页面上这个图片,是不是有两张?
一张是 "图片另存为" 左圆角的哪个
另一张是 "背景另存为" 做为背景的哪个

但是,有更'先进'点的.

一个在页面上显示330*8的双圆角图片,只有一个"图片另存为"方式保存,下载后打开,实际大小是460*8.
很奇特

[/Quote]

没有什么奇怪的,css sprite 在一张图上,postion背景定位而已
sjmlsxp 2008-09-18
  • 打赏
  • 举报
回复
这个我就不知道了
b246347b 2008-09-11
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 sjmlsxp 的回复:]
比如左边的图片只保留圆角部分,存一张
在做一张长10000(足够长就行)右边是圆角的,存一张

一个足够长的做背景
#top{background:url(images/top_right.gif.gif) right top no-repeat}
#top img{border:none}
<div id="top"> <img src="images/top_left.gif"/> </div>

大致上就是这样的
[/Quote]


学习!
sjmlsxp 2008-09-11
  • 打赏
  • 举报
回复
比如左边的图片只保留圆角部分,存一张
在做一张长10000(足够长就行)右边是圆角的,存一张

一个足够长的做背景
#top{background:url(images/top_right.gif.gif) right top no-repeat}
#top img{border:none}
<div id="top"><img src="images/top_left.gif"/></div>

大致上就是这样的
sjmlsxp 2008-09-11
  • 打赏
  • 举报
回复
图片都中间切开
一切为二

用滑动门的思想
igyhi 2008-09-11
  • 打赏
  • 举报
回复
re:zhihuixiaole

你提示了我,用缩放。<img style="width:200px;">
就是缩放比例大了会有些失真
zhihuixiaole 2008-09-11
  • 打赏
  • 举报
回复
用表格不就行了

61,110

社区成员

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

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