css - 如何调整图像大小(编辑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; }

如何让它们正确调整大小而不拉伸(stretch)？

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>