Question

我在将div中的图像定位时遇到了一些困难。 div被固定为219x197px，但图像加载了wordpress，我需要对其进行校对，以便即使图像小于或大于该图像，它也会居中并且如果较大则会隐藏溢出，如果较小则拉伸或居中（如果发生在较小的情况并不重要的时候。）

我不想调整图像的大小，我只是想将它显示在居中的位置，并且显示div上显示的任何内容，而其余的则隐藏溢出。

我找到了另一个问题，我设法将其水平居中，但我不能垂直地进行。

我尝试了一些保证金 - 左边的百分比，但它不是恒定的不同图像大小。我还尝试了line-height和vertical-align的一些内容，但似乎没有任何工作正常。

有人知道我能尝试什么吗？提前致谢！这是HTML和CSS，因为它可以水平居中：

<div class="img_article">
<span>
<?php get_post_image($post->ID,'large'); ?>
</span>
</div>

.img_article {
    border-bottom: 1px solid #EF5589;
    overflow: hidden;
    width: 219px;
    height: 197px;
    text-align: center;
}
.img_article > span {
    display: block;
    width: 1000px;
    height: 1000px;
    margin-left: -390px; /* -(width-container width)/2 */
}
.img_article > span > img {
    display: inline-block;
}

Answer 1

我不知道您尝试使用line-height和vertical-align，但它应该正常工作。

.img-hold { height: 200px; line-height: 200px; text-align: center; }
.img-hold img { verticale-align: middle; }

Demo

在固定的div中水平和垂直居中不同尺寸的图像

1 个答案: