WordPress中的响应图像

时间：2016-11-02 作者：Deex

自2015年以来，Wordpress似乎支持响应式图像。（第条https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/ )

1） 我现在创建了1600到2000宽的全响应css。2） 我添加了新的图像大小并进行了渲染

现在我被困在如何使用响应功能的部分

我的代码当前为

                        <div class="post-thumbnail single-post-thumb archive-wide-thumb">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail( \'recent-startpage-post\' ); ?>
                            <span class="fa overlay-icon overlay_startpage_recent"></span>
                        </a>
                    </div>
我目前不知道如何编写更改的代码\'recent-startpage-post\' 到\'recent-startpage-post-hr\' 如果屏幕宽度大于1600px

1 个回复
SO网友:Rishabh

最简单的方法是使用Media query. 只需做2个div，然后像这样为它们分配class/id

<div class="class-1">
</div>
<div class="class-2">
</div>
你需要附上你的the_post_thumbnail() 此div中的函数如下

<div class="class-1">
<?php the_post_thumbnail( \'recent-startpage-post\' ); ?>
</div>  
<div class="class-2">
<?php the_post_thumbnail( \'recent-startpage-post-hr\' ); ?>
</div>
在上述代码中，我附上了两个the_post_thumbnail() 在两个不同的班级。现在在css文件中，您必须编写media query 并在查询中使用这些类（class-1和class-2），如下所示

@media screen and (min-width: 1600px) {
.class-1{display:none;} 
}
    @media screen and (max-width: 1600px) {
.class-2{display:none;}     
}
在上述代码中class-1 将设置为display:none; 当屏幕大小大于1600px时class-2 将设置为display:none; 当屏幕大小低于1600px时。换句话说，功能the_post_thumbnail( \'recent-startpage-post\' ); 不会被使用（在1600px屏幕上方），因为他被封闭在“class-1”类的DIV中，并且该类已设置为display:none 对于1600px以上的屏幕尺寸，通过media query.

了解Media Query 详细地read this.

标签： images   responsive   小码农  

相关推荐

Broken images on iphone

我在iPhone上破坏了图像，这只发生在我大约一周前添加新图像的主页上（新图像的格式和大小与旧图像完全相同）这是网站：CartonMaster。伊利诺伊州公司提前感谢，