学做网站培训课程介绍

当前位置:

如何利用CSS自动调整图片的大小

经常更换wordpress主题,会有一个困扰,就是之前主题的内容区域宽度比较大,很多正文图片的尺寸可能是500px,而换了一个主题,内容区域的宽度比较小,假设是400px, 这时原先的图片宽度都是500px,这样就会撑大整个容器,造成页面布局混乱。

如何文章中的图片尺寸

下面介绍的CSS知识是利用CSS等比例缩小图片,这样就可以完美的显示在你的新主题上了。(如果你不了解CSS,请学习CSS视频教程

首先找到内容区域的样式,一般是.entry这个类,在style.css中增加以下代码就可以搞定了,方法如下:

.entry img {max-width: 400px}
.entry img {
zoom:expression( function(elm) {
if (elm.width>400) {
var oldVW = elm.width; elm.width=400;
elm.height = elm.height*(400 /oldVW);
}
elm.style.zoom = '1';
}(this));
}

根据你的主题内容区域的实际尺寸来设定图片最大宽度,只要小于等于这个宽度即可。将所有出现400px的地方改成你的宽度就好了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 经常更换wordpress主题,会有一个困扰,就是之前主题的内容区域宽度比较大,很多正文图片的尺寸可能是500px,而换了一个主题,内容区域的宽度比较小,
  • 通过网页制作教程上节课怎样在网页中添加表格,我们就可以在网页中插入一个表格,但往往插入的表格并不美观,我们需要设置一些表格参数去达到我们要求
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • 在日常上网过程中,复制,粘贴是特别寻常不过的了,有时我们在某一网站复制后,粘贴到别的地方时,它会自己加上它网站的一个版权信息链接。比如:此文章转
  • CSS如何调整DIV顶部边距 图文教程 (127040 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在新手网站制作教程里,我们讲了网站图片大小很大程度上影响了网站的打开速度,所以从用户体验角度来说,我们自己做网站时,网站图片要尽可能的小。压