【问题标题】：Wordpress Image Aspect RatioWordpress 图像纵横比
【发布时间】：2019-04-02 03:47:08
【问题描述】：

我有一个投资组合网页，我的问题是如何在图像变大和变小时时调整图像位置，例如我有一个垂直长的图像，而我有一个很小的图像。如何使长图像位于顶部，同时保持小图像居中。

我使用了一个 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;
}

【问题讨论】：

标签： php html css wordpress portfolio

【解决方案1】：

你可以试试css属性：

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

还有：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：