设为首页 - 加入收藏
您的当前位置:主页 > 网页教程 > CSS教程 > 正文

如何利用CSS网页中图片大小-如何控制网页中图片大小

来源:未知 点击数: 时间:2018-01-14

  要控制图片的大小,必须得先知道这张图片是以什么形式展现的:

  1.导入

  2.background-image.

  就只有这2种方法,即使是用JS或者其他语言来控制,也是万变不离其宗,这两种方法就是本质。

  对于第一种(),控制大小可以通过外框设置宽度,然后img用100%来适应外框(这样子,图片会根据width来自动调整图片,如果长、宽都设死了,那么图片一般都会出现变形),当然纵向也是同理可以执行的。

  第二种的话(background-image);可以通过:

  background-size来自适应大小。样式有4个属性:

  length:

  设置背景图像的高度和宽度。

  第一个值设置宽度,第二个值设置高度。

  如果只设置一个值,则第二个值会被设置为 "auto"。

  测试

  percentage:

  以父元素的百分比来设置背景图像的宽度和高度。

  第一个值设置宽度,第二个值设置高度。

  如果只设置一个值,则第二个值会被设置为 "auto"。

  测试

  cover

  把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

  背景图像的某些部分也许无法显示在背景定位区域中。

  测试

  contain:

  把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

  下面是织梦CMS文章中图片的控制

  织梦cms在采集图片,或者直接复制图片到发布框中时,经常会出现图片宽度超出页面宽度,或者不显示,或者撑破页面的现象。

  笔者经过仔细研究,综合了网上几个示例的优点,总结出一套办法,希望对大家有用。 本方法特点: 1、自动调整文章内容中大图片最大宽度,不影响小图片的宽度。 2、不影响文章内容外的其它内容。 方法如下: 在文章发布模板中,“{dede:field.body /} ”上下进行如下更改(红色为添加内容)

  {dede:field.body /}

  然后在模板style.css中添加如下内容(加到最后即可)

  .content img{

  max-height:1500px;

  max-width:630px;

  width:expression_r((this.width > 630 && this.width > this.height) ? '630px': this.width+'px');

  height:expression_r((this.height > 1500 && this.height > this.width) ? '1500px': this.height+'px');

  float:middle;

  }

  案例二

  用css来强制按比例压缩图片的高度或宽度

  css代码如下:

  img,a img{

  border:0;

  margin:0;

  padding:0;

  max-width:590px;

  width:expression_r(this.width>590?"590px":this.width);

  max-height:590px;

  height:expression_r(this.height>590?"590px":this.height);

  }

  html代码如下:

 
load="if(this.width>120) this.width=120;if(this.height>145) this.height=145;" />

  这样当图片的高度或宽度若超过590px,将会按比例压缩成590px,如果不超过则按原大小显示。

方法3 就是利用JS实现自适应图片大小

相关文章:

相关推荐:

A3站长网 站长网 站长网技术网 站长教程网 织梦CMS教程 织梦模板 帝国CMS模板 联系QQ:26991496 邮箱:26991496@qq.com

A3站长网:欢迎您!谢谢您的访问...

Top