html - 可拉伸(stretch)至全尺寸的响应图像

Question

我试图强制为初始页面生成的图像拉伸(stretch)到完整尺寸，但同时让图像具有响应性和流畅性。

这是HTML

<div class="newsImage">
                <xen:contentcheck>
                <xen:if is="{$news.attach}">
                    <a href="{xen:link threads, $news}"><img src="{xen:link attachments, $news.attach}" alt="{$news.attach.filename}" style="width: 500px; height: 200px;" /></a>
                <xen:elseif is="{$news.image}" />
                    <a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" style="width: 500px; height: 200px;" /></a>
                <xen:else />
                    <xen:avatar user="$news" size="m" itemprop="photo" />
                </xen:if>
                </xen:contentcheck>
                        <div class='newsTitle'><h2><a href="{xen:link threads, $news}" title="{$news.title}">{xen:helper threadPrefix, $news}{$news.title}</a></h2></div>

            </div>

这是CSS

我确定最大宽度在使其响应方面不正确，但它似乎强制了我想要的拉伸(stretch)。

.recentNews .newsImage        { width:100%; height:auto;  }
.recentNews .newsImage img        { max-width:100%; height:auto;  }

感谢您的帮助!

Answer 1

背景大小属性:

background-size: cover;
background-size: 100% 100%\9; /* IE8 */