如何简单的在WordPress中使用响应式图片

how-to-easily-make-wordpress-images-responsive

响应式网站设计已经越来越普遍,使用响应式图片就是这类网站的一个特点之一。响应式图片不仅仅可以以较大尺寸在大的显示屏是显示,并且可以自适应一些小的显示屏,例如,iPad、iPhone等等。使用响应式图片并不困难,这里就将介绍一个简单的技巧,让你的WordPress博客中使用响应式图片设计。

首先,我们需要在functions.php中定义一个短代码:

function responsive_images($atts, $content = null) {

<em id="__mceDel"> return ‘<div class="image-resized">’ . $content .’</div>’;
}

add_shortcode(‘responsive’, ‘responsive_images’);

完成后,在Style.css中添加以下CSS样式:

@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

在一般情况下,上面的代码已经能够很好地达到我们的意图,但如果你想更进一步,分配不同的图像到不同尺寸的屏幕,你可以将上面的代码做类似于下面这样的扩展:

/* 240px screens */
    @media only screen and (max-width: 319px) {
    .image-resized img {
        width:240px;
        height:auto;
    }
}

/* 320px screens */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .image-resized img {
        width:320px;
        height:auto;
    }
}

/* 480px screens */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .image-resized img {
        width:480px;
        height:auto;
    }
}

OK!大功告成,现在就可以使用我们定义的短代码[responsive]插入响应式图片到博客中了:

[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]

*代码摘自ROCKABLEthemes

EOF

文章标签:

如何简单的在WordPress中使用响应式图片》有7条评论

    1. 多谢关注!~

      最近一段时间公司事情太多,小站稍稍更新慢了一点儿~呵呵……

      1. 我更新的更慢…一直想自己动手做个主题,但是是个小白,零基础,不过看你几篇文章,也是从小白起步的嘛,我觉得,我应该开始了,而不是总想着开始。

  1. 值得学习下~ 可是我都懒得搞了.我觉得就简单的就好了~ 而且图片我的博客也没那么多。

发表评论

GM8U