1

我试图强制为启动页面生成的图像拉伸到全尺寸，但同时让图像具有响应性和流畅性。

这是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

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

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

谢谢您的帮助！

4

2 回答 2

5

背景大小属性：

background-size: cover;
background-size: 100% 100%\9; /* IE8 */
于 2013-08-28T00:25:54.343 回答
3

您使用内联样式设置宽度和高度是否有原因？如果您删除它们，它应该可以工作。

style="width: 500px; height: 200px;"

max-width如果图像大于 div，则将起作用，否则您需要将其设置为width，100%以便较小的图像可以拉伸到容器的宽度。

http://jsfiddle.net/WPxnG/2/

HTML

<div class="recentNews">
    <div class="newsImage">
        <a href="#"><img src="//lorempixel.com/1500/1500/" alt=""/></a>
    </div>
</div>

CSS

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

.stretch {
    width: 100%;
}
于 2013-08-28T00:54:15.053 回答