<cms:img>标签的用法举例说明

    OpenCms使用标签就可以达到的图片缩放功能是非常的有用的。我也在以前就转载过《cms:img标签用法说明》这篇文章。为了形象的说明，摘录下面内容，让大家看看几个参数的修改就可以输出不同的图片效果。

[王毅原创，转载注明]

注意：数据库里面还是唯一的图片，但是你可以在静态输出来的时候，设置不同的版本！这个很重要。

OpenCms 图片缩放设置

图片缩放

使用默认图片缩放<cms:img src="logo_opencms_png24.png" width="width"/>以后，将会生成一下html代码，并显示一下效果。

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:400,h:97" width="400" height="97"> 缩略为：400×97

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:206,h:50" width="206" height="50"> 缩略为：206×50

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:100,h:24" width="100" height="24"> 缩略为：100×24

图片填充

使用图片缩略的填充方式，例如这句代码，象下面一样做个两个参数的替换，就可以呈现下面这些效果。 <cms:img src="logo_opencms_png24.png" scaleType="1" scalePosition="7" scaleColor="#FF0000" width="300" height="100" />
scalePosition="7" scaleColor="#FF0000"	scalePosition="6" scaleColor="#00FF00"	scalePosition="8" scaleColor="#0000FF"
scalePosition="4" scaleColor="#00FF00"	scalePosition="0" scaleColor="#0000FF"	scalePosition="5" scaleColor="#FF0000"
scalePosition="1" scaleColor="#0000FF"	scalePosition="3" scaleColor="#FF0000"	scalePosition="2" scaleColor="#00FF00"

图片虑镜

<cms:img src="logo_opencms_png24.png" scaleFilter="grayscale" width="300" height="100" /> 将代码中的参数用下列参数替换，将会得到下面这些虑镜效果。
scaleFilter="grayscale"	scaleFilter="shadow"	scaleFilter="shadow:grayscale"

图片缩放类型

<cms:img src="logo_opencms_png24.png" scaleType="0" width="300" height="60" /> 将这行代码中的“scaleType”参数做修改，分别得到下面这些显示和输出的html代码。

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60" width="300" height="60">

scaleType="0"

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:1" width="300" height="60">

scaleType="1"

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:2" width="300" height="60">

scaleType="2"

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:3" width="300" height="60">

scaleType="3"

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,t:4" width="300" height="60">

scaleType="4"

转换模式

而使用另一个参数scaleRendermode，可以让图片输出不同的质量，譬如降低图片质量可以加快图片显示速度。 <cms:img src="logo_opencms_png24.png" scaleRendermode="2" width="300" height="60" /> 将上面代码中这个参数分别修改为“1”和“2”，你将会看到下面的显示效果和输出的html代码。

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60" width="300" height="60">

<img src="/opencms/opencms/alkacon-documentation/documentation_taglib/logo_opencms_png24.png?__scale=w:300,h:60,r:2" width="300" height="60">

我的相关日志：

2007-03-23 |  [转]OpenCms for MySql　安装图解
2007-03-23 |  [转][图文]OpenCms VFS plugin for Eclipse 安装与使用
2008-04-11 |  <cms:img>标签的用法举例说明
2008-04-10 |  再谈<cms:contentaccess>标签的使用
2008-04-09 |  浅谈<cms:contentaccess>标签的使用
2008-03-21 |  <cms:contentload>标签的使用
2007-12-14 |  <cms:editable>标签的使用
2007-12-13 |  <cms:contentshow>标签的使用
2007-12-12 |  <cms:contentloop> 标签的使用
2007-12-11 |  <cms:contentinfo>标签的使用
2007-12-10 |  <cms:contentcheck>标签的使用
2007-06-19 |  OpenCms的<cms:info>标签