WordPress的图像长宽比

Question

我有一个投资组合网页，我的问题是，当图像越来越大时，如何调整图像位置，例如，我有一个垂直方向较长的图像，而我只有一个较小的图像。如何将长图像放置在顶部，同时将小图像放置在中央。

我使用了acf图片上传器 源代码：

<?php if( get_field('image_thumbnail') ): ?>
    <div class="image__thumbnails" style="background-image: url(<?php the_field('image_thumbnail'); ?>);background-position: top;background-size: 100%;background-repeat: no-repeat;"></div>
    <!--    <img src="<?php the_field('image_thumbnail'); ?>" />-->
<?php endif; ?>

css

.image__thumbnails {
    height: 212px;
}

Answer 1

您可以尝试使用CSS属性：

.image__thumbnails{
    height:200px;
    width:200px;
    object-fit:cover;
    }

还：

object-fit: contain,cover,fill, etc...;

Answer 2

.wrapper
{
   display:flex;
    /* align-items:center; this doesn't works in ie11 */
}

.wrapper > *
{
   align-self:center; /* this works in ie11 */
}