网页HTML 5图片自适应屏幕 img等比例缩放大小代码

原文链接：https://www.chenweiliang.com/cwl-964.html

文章目录

• 1 CSS 图片自适应什么意思？
• 2 CSS image高度和宽度自适应代码
• 3 注意事项

由于移动互联网蓬勃发展、微信营销的普及，手机已是生活中必备的工具。

如果WordPress主题开发人员，在设计的WordPress主题网页时，没有做好HTML 5图片自适应屏幕的话，就会出现非常难看图片错位，用户体验极差！

CSS 图片自适应什么意思？

CSS图片自适应是指让html 网页中的图片，通过CSS代码实现：

• 自动适应不同设备的宽度和高度。


• img 标签等比例自动缩放大小。

接下来，陈沩亮会给你分享CSS img 等比例缩放大小代码 ^_^

CSS image高度和宽度自适应代码

将以下代码，添加到WordPress主题的 style.css 文件中 ▼

/*图片自适应宽度和高度*/
.entry-content img 
max-width: 600px; 
width: expression(this.width > 600 ? "600px": (this.width+"px"));height:auto; 

注意事项

请将以上 class 选择器 .entry-content ，修改成你的主题所对应的 class 选择器。

CSS选择器是什么？class跟id有什么区别？以下教程就有说到 ▼

CSS选择器class跟id有什么区别？HTML中id和class用法

CSS选择器class跟id有什么区别？HTML中id和class用法

陈沩亮最近在执行SEO，优化网站的WordPress主题。

虽然之前有学过一些基础的 HTML 和 CSS 知识，但是一段时间没有操作，尤其是CSS部分……

欢迎转载《网页HTML 5图片自适应屏幕 img等比例缩放大小代码》
陈沩亮版权所有，转载请注明出处链接：https://www.chenweiliang.com/cwl-964.html


网站地址：https://www.chenweiliang.com/



欲学更多秘技，请关注微信公众号：cwlboke