将缩略图适配到div

时间：2011-08-12 作者：joni

我想得到一个上传的图像在一个div内100%适合。问题是，上传的图像有不同的大小。例如，我上传了一幅图像，wordpress创建了一个150x150的缩略图。我想将缩略图显示为200x150的div。图像比例被扭曲是可以的，但我无法做到这一点。我正在尝试：

<?php the_post_thumbnail( array(200,150) ); ?>

仅显示150x150。

另外，我不想使用set\\u post\\u thumbnail\\u size添加或调整另一个图像副本的大小。相反，我只想通过拉伸使缩略图适合div。

4 个回复

SO网友:Chris

使用设置阵列中图像的大小时the_post_thumbnail 就你而言documentation 声明“裁剪”功能自Wordpress 3.0起不起作用。为了完成您想要的，您需要执行以下操作。

在您的功能中。php文件，调用add_image_size, 它允许您指定图像的尺寸以及是否应裁剪图像。

//set image size
add_image_size( \'my-custom-size\', 200, 150, true );

//use in theme
the_post_thumbnail( \'my-custom-size\' );

或者，您可以使用CSS设置图像的大小，这将迫使图像扭曲和拉伸到所需的大小，但下面的Wordpress方法将是正确的方法。注：add_image_size() 按指定的尺寸创建所有图像的副本。它也只适用于新上传的图像。已存储在数据库中的图像不受影响。

SO网友:Chris Carson

尝试

the_post_thumbnail( \'post-thumbnail\', array(\'width\'=>\'200\', height=>\'200\')  );

第二个（可选）参数是要应用于<img> 标签

或者，您可以通过css实现这一点。。。

 .my-thumb-ctr img {width:200px;height:150px;}

SO网友:Satish Gandham

使用此插件动态生成缩略图。http://swiftthemes.com/swiftdynamicthumbs-plugin-to-generate-thumbnails-dynamically-when-needed/

使用此插件，缩略图将生成精确的尺寸，没有扭曲。

SO网友:Amirmasoud

在函数中。php：

function yourTheme_thumbnail($size) {
    if( has_post_thumbnail() ) {
        GLOBAL $post;

        // get thumbnail url with given size.
        $url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), \'$size\' );

        // return it as an CSS property.
        $backgroundImage = \'background-image: url(\' . $url[0] . \');\';
        echo $backgroundImage;
    }
}

在post循环中：

LOOP START

<a href="<?php the_permalink() ?>">
    <div class="post-thumbnail" style="<?php yourTheme_thumbnail(\'medium\') ?>">
        <h2 class="caption"><?php the_title() ?></h2>
    </div>
</a>

LOOP END

最后，在CSS中添加以下规则：

.post-thumbnail {
    background-image: url(images/bg.png);
    background-color: rgba(0, 0, 0, .7);
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

和bg。如果未设置缩略图，png是默认图像。

结束

标签： images 小码农

Resizing all images

我刚刚更改了博客的主题，由于页面宽度很小，它打破了布局。我之前的大多数图片（附在帖子中）的宽度都在600px左右，现在我需要按450px的比例调整它们的大小。如何一次性调整它们的大小？有这个插件吗？P、美国：编写CSS规则是一个很好的选择，我已经做到了。但我认为调整图像大小也会减少每个页面的下载开销！

小码农CODE

将缩略图适配到div

相关推荐

Resizing all images