我想要根据媒体大小不同的缩略图后大小

时间：2016-12-01 作者：marcp

我的主页上有以下代码

<?php echo \'<img class="img-responsive" src="\',
      wp_get_attachment_image_src( get_post_thumbnail_id(), \'Large\' )[0], \'">\'; ?>
本例中的大尺寸为1920x245。这在浏览器中效果很好，但当图像在较小的屏幕上缩小时，我觉得它太薄了。我想在那个场景中使用具有不同纵横比的图像。

如何调整上述php代码以响应媒体大小？

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

就像经常发生的那样（不管怎么说，我的问题！）答案很简单。我为图像的样式添加了一个85像素的最小高度参数，当图像达到该高度时，它会对图像进行裁剪。这正是我想要的行为。

.img-responsive{
  display:block;  
  max-width: 100%;
  height:auto;
  min-height: 85px;
}

SO网友:Benoti

您可以使用该功能[wp_calculate_image_srcset()][1], 用于返回srcset attribute 值，则需要存在不同的大小，否则函数返回false。

下面是与srcset的链接的样子，

<img class="alignnone size-full wp-image-122491 "
src="http://example.com/wp-content/uploads/2016/03/C0101-012.jpg" alt="C0101-012" width="2000" height="1200"
srcset="http://example.com/wp-content/uploads/2016/03/C0101-012.jpg 2000w, http://example.com/wp-content/uploads/2016/03/C0101-012-656x394.jpg 656w, http://example.com/wp-content/uploads/2016/03/C0101-012-1024x614.jpg 1024w, http://example.com/wp-content/uploads/2016/03/C0101-012-1080x648.jpg 1080w"
sizes="(max-width: 2000px) 100vw, 2000px" />
使用srcset，浏览器可以确定哪个图像是最好的。在不支持srcset的浏览器上，src属性的值将用作图像src默认图像（主要浏览器支持srcset）。

这里有一个小例子，我需要添加一个随机的大截面图像，并为这个图像生成新的属性。介质来自通用阵列，我简化了所有功能，

function enqueue_front_page_srcset_js(){

    $random_array = array(\'id\'=>\'1234\', \'url\'=>\'http://example.com/wp-content/uploads/2016/03/C0948b-162.jpg\', ...);

    $random_key = array_rand($images_array, 1);
    $random_image = $images_array[$random_key];

    $size_array = array(array(656, 394), array(1024, 614),array(1080, 648));
    $image_src = $random_image[\'url\'];
    $image_meta = wp_get_attachment_metadata( $random_image[\'id\'] );

    $img_srcset = wp_calculate_image_srcset( 
                   $size_array, 
                   $image_src, 
                   $image_meta, 
                   $random_image[\'id\'] 
    );


    wp_register_script( \'brozzme-random-image\',  get_stylesheet_directory_uri() . \'/js/jquery.b7e.random.image.js\', array( \'jquery\' ), false, true );
    wp_localize_script(
        \'b7e-random-image\',
        \'randomImage\',
        array(
            \'newSrc\'=> $image_src,
            \'randomSrcset\'=> $img_srcset
        )
    );

    wp_enqueue_script(\'b7e-random-image\');
}

add_action(\'wp_enqueue_scripts\', \'enqueue_front_page_srcset_js\');
jQuery脚本

jQuery(document).ready(function ($) {

    var newSrc = randomImage.newSrc;
    var newSrcset = randomImage.randomSrcset;

    $( ".et_pb_fullwidth_image_0 img" ).attr( "src", newSrc );
    $( ".et_pb_fullwidth_image_0 img" ).attr( "srcset", newSrcset );
});
希望有帮助！

标签： php   theme-development   小码农  

相关推荐

如何使用unction.php更改登录URL？

我想更改我网站的登录URLhttp://example.com/wp-admin 到http://example.com/example.我不想使用插件来实现这一点，所以我可以从函数中实现这一点。php？