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

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

建站的模板,推荐使用WordPress的自适应主题:

  • 若WordPress主题开发人员,在设计的WordPress主题网页时,没做好HTML 5图片自适应屏幕……
  • 在移动设备上浏览网站,就会出现非常难看图片错位,用户体验极差!

CSS 图片自适应什么意思?

CSS 图片自适应 HTM5

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

  • 自动适应不同设备的宽度和高度。
  • img 标签等比例自动缩放大小。

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

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

在html中插入图像:

如果你希望图像自适应屏幕的小,而不是在宽度和高度上保持固定不变。

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

/*图片自适应宽度和高度*/ 
img { height: auto; width: auto\9; width:100%; }

表示自动宽度的意思 width:auto;

\9 是hack css 的一种写法。

  • 这种方式将“\9”添加到普通的css代码中,只有IE浏览器可以识别它,其他浏览器会忽略这个语句。
  • 这将实现浏览器差异化,能够实现兼容的浏览器的目的。

注意事项

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