如何调整图像大小（编辑CSS）

Question

我正在尝试编辑wordpress模板。我的目标是让电影海报看起来比现在更大。

这就是目前的情况 - http://prntscr.com/i30lgt

这是我在css - http://prntscr.com/i30ltf

中编辑高度时的样子

我所做的更改都在这个css代码中：

  .loop-container article img.attachment-post-thumbnail {
width: 100%;
height: 450px;
-webkit-transition: opacity 0.175s ease-in-out;
-moz-transition: opacity 0.175s ease-in-out;
-o-transition: opacity 0.175s ease-in-out;
transition: opacity 0.175s ease-in-out; }

如何让它们正确调整大小而不是伸展？

Answer 1

可能会帮助你

    <div class="article">
            <img alt="img" src="thumb-image.jpg" class="attachment-post-thumbnail">
    </div>
    <style>

    .article{
        display:block;
        overflow:hidden;
        width:100%;
        height:450px;
    }

    .article img.attachment-post-thumbnail {
        width:100%;
        height: auto;
        display:block;
    }

    </style>

Answer 2

如果您希望图片覆盖div或其他内容，请使用object-fit:cover;。 或者，制作height:auto。

object-fit:cover;将从两侧裁剪您的图像。