现在移动终端的访问已经成为趋势，所以为了提高大家的阅读体验，现在对于图片等的自适应是非常重要的，现在新的主题基本上都是支持图片在移动终端的自适应的 。

当然了，对于像我这样比较守旧的主题，以及部分主题是不能友好的支持移动终端的，其实有一个很简单的办法来让主题在移动终端实现图片的自适应效果。

这是没有启用自适应的效果，会发现图片外溢了，影响美观 ：

这是启用了自适应效果后，图片的整体展示效果明显得到了提升 ：

一、备份主题theme的style.css文件，然后通过Dreamweaver打开style.css文件，然后检索是否存在max-width

如果存在，当然就很简单了，改成100%就可以了，如果没有发现max-width，然后就在你的style.css中添加如下就可以了：

p img {
padding: 0;
max-width: 100%;
height: auto;
}

PS: 通过max-width来定义相对宽度，height则定义高度，这样避免图片拉伸影响美观，最后提醒一下，图片前后不要出现<h4>和</h4>之类的标签，不然也可能不能显示效果 。

Related Posts

转载原创文章请注明，转载自：SKY [https://www.2sk.com/]

本文链接: https://www.2sk.com/websites/phpwordpress/wordpress-mobile-device-image-self-adaption.html

Leave a Reply Cancel reply

Name *

Email *

Website