我的主题可以选择(像我猜的任何其他主题一样)预定义的特征图像大小(缩略图、中等大小等等)。我选择图像为缩略图,在媒体设置中设置为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媒体查询在这方面帮不了我,除此之外,我的知识有限。
非常感谢您的帮助。
最合适的回答,由SO网友:Ahrengot 整理而成
根据经验,响应性设计不应在服务器端处理。这有两个主要原因:
您可以在服务器端进行的唯一检测是用户代理嗅探。响应性设计应基于特征检测,而不是用户代理。
很容易遇到缓存问题等(即移动用户得到的是缓存的桌面版本)。
对于响应迅速的图像,我通常会这样做:
<img src="small.jpg" data-lg="large.jpg" data-sm="small.jpg">
我使用JavaScript来切换src属性,这取决于window.screen
或window.innerWidth
.
您还可以有两个图像标记,并使用CSS媒体查询在它们之间进行交换。但是,当然,你有两个图像,你真的应该只有一个。
关闭src
单个img标记的最接近于srcset的新picture元素中发生的事情。