在变化的布局中动态裁剪图像技术

标签: 变化 布局 图像 | 发表时间:2013-02-28 18:57 | 作者:arest
出处:http://blog.csdn.net

在一个布局大小自由变化的页面中,固定宽度的图像会由于布局宽度的变化而出现溢出问题。使用此技术可以通过动态裁剪背景图像和前景图像以适应宽度变化的布局。


由于布局大小改变导致图像占用的区域大小发生变化,此时图像本身也需要做相应调整。当图像的尺寸不大,没有超出布局的边界的时候不会有任何问题。当然还有很多种方法可以动态改变一个图像在屏幕上占用的区域大小,比如给图像指定最小的宽度。

我已经写了很多关于改变图像占用屏幕大小的文章,但是我们现在讨论另一种方式:动态调整图像显示出来的部分。这种方式不改变图像本身的大小,而是改变图像可以在页面上显示出来的部分大小,在允许显示区域之外的那部分图像将会被隐藏。我给这种方式命名为“动态剪切”。

对于前景和背景图像,你都可以实现动态剪切的效果。虽然看上去差不多,但是这两种方式适应于不同的情况。

动态裁剪背景图像

如果图像只是起到装饰作用,那么毫无疑问应该使用背景图像剪切技术。这种技术可以将你要剪切的图像与其他装饰的图像一起放在CSS中,这样的话如果你的网站外观发生的变化,所有装饰的图像都可以通过修改一个CSS文件来实现,而不用在网站的多个页面上分别调整。将装饰性的图像在CSS中定义为背景还有一个好处,就是当用户打印页面的时候,可以禁止打印背景图像(大多数浏览器默认是禁止的),用户可以只专注于保存需要的内容。

如果要使用CSS背景图像,必须先要有一个区域来放置背景。下面的例子使用div元素来实现:

   <div id="background"></div>

这是一个空的div元素;不包含任何内容,它的存在只是为了放置一个背景图像,你可以使用一个更符合情景的元素来代替它。比如,你可能想要动态裁剪一个在h3元素上方的图像以适应宽度。你可以给这个h3元素增加一个背景图像,给h3元素设置足够的top padding值,就可以保证文字显示在图像的下方,而不是上方。

接下来,为这个div元素设置一个非平铺的背景图像:

   div#background {
  background: url(styx.jpg) no-repeat;
  border: 2px solid #000;
}

我给这个div元素增加了一个border属性以便于清楚的看到它的边界位置。现在,由于div元素中没有包含内容,它的高度缩小为0。需要加入width和height属性“打开”这个div。

   div#background {
    width: 50%; 
    height: 330px;
    background: url(styx.jpg) no-repeat;
    border: 2px solid #000;
}

Tip:如果想要使高度也可以动态改变,需要为height使用可变的设置,像width一样(如上面的50%)

将宽度被设置为动态的值,比如使用一个百分比,像我上面做的那样,也可以使用em单位,这样div可以随着width的改变而动态调整图像的显示部分。如果将高度设置为一个固定像素值,图像显示的高度会始终不会变化。

这个div元素的宽度会始终为当前显示视口的50%;它的背景图像尺寸不会发生变化,但是会从右边开始裁剪掉动态大小的一部分。

然而,有时候有些图像从左边开始剪切看上去效果更好,比如一个小猫的头在照片的右边。此时可以通过设置background-position属性,或者它的简写方式来指定图像剪切的方向:

   div#background {
    width: 50%;
    height: 330px;
    background: url(styx.jpg) no-repeat right;
    border: 2px solid #000;
}

现在背景图像与div是右侧对齐的,当div的大小改变时会动态从图像的左侧开始剪切。

最终只需要使用上面的CSS定义就可以实现基本的动态剪切技术,但是你可以根据实际需要在CSS中增加其他属性。比如在上面的示例中div的宽度超过图像时,在div中显示空白区域。当然还有其他的方法处理这种情况:

  • 给div加一个背景颜色属性来填充空白区域
  • 使图像的边缘颜色与div的背景颜色混合,这样看上去效果也不错
  • 给div设置一个max-width属性,保证它的宽度不会比图像大
  • 在第三个方法的基础上再给div设置min-width,max-height,min-height属性,这样图像就不会被拉伸的显得很诡异

动态裁剪前景图像

如果你想要动态剪切的图像是用来的提供内容的,你应该在(X)HTML中将它作为前景图像放在一个img元素里。当你不确定是否应该将它放在img元素里的时候,你应该首先思考这个图像是一个实际的内容还是只起装饰作用。

   这个图像是否传递了一些信息,我需要使用alt属性来指achieve定一个文本吗?
我是否确定打印的时候必须要打印出这个图像,如果缺少这个图像的话打印结果是不正常的或者不完整的?
我是否需要这个图像的链接?

如果上面的问题都是肯定回答,这个图像是一个应该放在img元素里的内容。CSS背景图像实现不了上面的功能-至少在没有做一些hack的情况下实现不了(我保证所有的hack方法都傻的一腿),而一个img元素就可以简单的解决所有问题。

与运用背景图像剪切技术一样,我们需要在(X)HTML中的一个块元素里放置图像。我们也同样使用一个div;不过这次它不会是空的,我们要在里面放一个img元素:

   <div id="foreground">
    <img src="styx.jpg" alt="my cat Styx" width="500" height="330">
</div>

注意:img元素的alt属性可以指定一段文本代替图像。背景图像无法实现这个功能

同上个例子一样,这个div元素需要用动态的width和一个px单位的height属性:

   div#foreground {
    width: 50%;
    height: 330px;
    border: 2px solid #000;
}

至今,我们只是创建了一个div和一个img,并没有用到动态剪切技术。如果这个图像的大小超出了div,它不会被剪切,而是会溢出。 要实现剪切的效果,加入overflow属性:

   div#foreground {
    overflow: hidden; 
    width: 50%;
    height: 330px;
    border: 2px solid #000;
}

现在任何超出div的图像部分都会被隐藏。 现在解决同样的问题,如何使图像剪切的方向变成左边。由于这不是一个背景图像,所以无法使用background-position属性。我们可以使这个图像浮动到另一个方向:

   div#foreground img {
    float: right;
}

图像固定在div的右边,所以当div大小改变的时候图像会动态调整左边显示的区域。使用前景图像看上去与使用背景图像效果差不多,但是我们可以给它加上alt属性,也很容易给它加上一个链接。

(翻译自 http://zomigi.com/blog/hiding-and-revealing-portions-of-images/ )

大笑 欢迎访问个人Blog: http://www.3body.tk/iblog/

作者:arest 发表于2013-2-28 18:57:49 原文链接
阅读:0 评论:0 查看评论

相关 [变化 布局 图像] 推荐:

在变化的布局中动态裁剪图像技术

- - CSDN博客Web前端推荐文章
在一个布局大小自由变化的页面中,固定宽度的图像会由于布局宽度的变化而出现溢出问题. 使用此技术可以通过动态裁剪背景图像和前景图像以适应宽度变化的布局. 由于布局大小改变导致图像占用的区域大小发生变化,此时图像本身也需要做相应调整. 当图像的尺寸不大,没有超出布局的边界的时候不会有任何问题. 当然还有很多种方法可以动态改变一个图像在屏幕上占用的区域大小,比如给图像指定最小的宽度.

Android 布局之线性布局、相对布局、表格布局、帧布局

- - CSDN博客推荐文章
1、LinearLayout(线性布局). 2、RelativeLayout(相对布局). 3、TableLayout(表格布局 两行两列). 4、FrameLayout(帧布局)显示控件会进行叠加,后者会叠加在前者之上. 作者:h7870181 发表于2012-11-7 22:28:59 原文链接.

css三列布局

- - Wing的风言风语
   web平面设计中有一个既经典又基础的问题(据说很多公司面试都考):三列布局问题,就是一个大盒子,里面竖直再分三块小盒子并排,其中左边的盒子和右边的盒子固定宽度,中间的盒子自适应宽度,无乱怎么样放大缩小浏览器都不会变形. 这两天研究了一下这个问题,默认父容器是body,1:设置三个盒子都左浮动且宽度都是33.3%,不行.

函数图像(二)

- DreamToTrue - C++博客-λ-calculus(惊愕到手了欧耶)
    今天终于把雏形给做出来了. 主要的方法是牛顿迭代法,把屏幕上的所有点都收敛到函数图像上面. 为了提速,我是用了ThreadTool.QueueUserWorkItem和Parallel.For,还把那颗函数的语法树用Linq.Expression编译成了机器码. 下面的这些图都是二十秒钟左右就可以画出来的了.

瀑布流布局浅析

- 郑小东 - Taobao UED Team
如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊. 类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢.

一览CSS布局标准

- - Kejun's Blog
回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的. 1998.5.12,CSS2发正式版. 随后发修订版CSS2.1,纠正了CSS2中的一些错误. 注意从CSS2起,CSS的作用就不是辅助展现了,变为全全负责展现. (注:当年 CSS2的勘误表有兴趣可以看看).

Android的UI布局总览

- - 博客园_首页
                  android布局的目的是为了实现不同屏幕比例适配而设计的,有五种布局类:FrameLayout、LinearLayout、AbsoluteLayout、RelativeLayout和TableLayout. 五大布局类的继承关系如下(以FrameLayout为例):.

Android响应式布局

- - 博客 - 伯乐在线
由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法. 在web的响应式布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些都可以实现web上的响应式布局,所以我想在Android上试试看. 在Android上,是通过 configuration qualifiers的方式来加载不同的资源,基于不同的手机屏幕尺寸或者屏幕的朝向(竖直还是水平),而我最大的目标就是创建一个可以自动缩放的布局,而不用根据不同的屏幕尺寸加载不同的布局文件.