根据屏幕大小更改特色缩略图

时间:2014-05-20 作者:user51649

我的主题可以选择(像我猜的任何其他主题一样)预定义的特征图像大小(缩略图、中等大小等等)。我选择图像为缩略图,在媒体设置中设置为150x150,但我的问题是480px屏幕。这里我希望缩略图是全宽的,而不是150px。如果我加上宽度:100%;在CSS中,我得到的150px图像被拉伸到480px,看起来很满。

输出我的特色图像的代码如下:

function omega_entry() {

    if ( is_home() || is_archive() || is_search() ) {
        if(omega_get_setting( \'content_archive_thumbnail\' )) {
            get_the_image( array( \'meta_key\' => \'Thumbnail\', \'default_size\' => omega_get_setting( \'image_size\' ) ) ); 
        }
        ...etc}
...etc}
我想要另一个最大480px的特色图像大小,没什么特别的,就像这样:

<?php the_post_thumbnail(\'thumbnail\', array(\'class\' => \'myclass\')); ?>  
我知道分辨率可能已经过时了,但我希望我的网站在大多数设备上看起来都不错,尤其是在低端设备上。我想CSS媒体查询在这方面帮不了我,除此之外,我的知识有限。

非常感谢您的帮助。

2 个回复
最合适的回答,由SO网友:Ahrengot 整理而成

根据经验,响应性设计不应在服务器端处理。这有两个主要原因:

您可以在服务器端进行的唯一检测是用户代理嗅探。响应性设计应基于特征检测,而不是用户代理。

很容易遇到缓存问题等(即移动用户得到的是缓存的桌面版本)。

对于响应迅速的图像,我通常会这样做:

<img src="small.jpg" data-lg="large.jpg" data-sm="small.jpg"> 我使用JavaScript来切换src属性,这取决于window.screenwindow.innerWidth.

您还可以有两个图像标记,并使用CSS媒体查询在它们之间进行交换。但是,当然,你有两个图像,你真的应该只有一个。

关闭src 单个img标记的最接近于srcset的新picture元素中发生的事情。

SO网友:Matt Royal

只需使用响应性设计技术,因此不要使用图像的“缩略图”版本,而是使用“大”或“中”大小,然后使用CSS为您缩小图像的比例。

<style>
img {
width: 100%;
height: auto;
}
</style>

结束

相关推荐

mobile vs responsive sites

美国一家医疗诊所的网络公司告诉我,对他们来说,建立一个常规的WP网站和一个单独的WP移动网站比建立一个单一的WP响应网站更便宜。什么是更好的传统智慧。是否只对那些负担不起常规和移动站点的用户做出响应,或者它处理的设备是否比移动站点多?