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

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

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

Answer 2

你可以试试 css 属性:

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

还有：

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

Wordpress 图像纵横比

Wordpress Image Aspect Ratio

php

html

css

wordpress

portfolio

css