Question

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

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

感谢您的帮助！

Answer 1

背景尺寸属性：

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

Answer 2

您是否有理由使用内联样式设置宽度和高度？如果你删除它们应该有效。

<击> style="width: 500px; height: 200px;"

如果图片大于div，则

max-width将起作用，否则您需要将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%;
}

响应式图像延伸至全尺寸

2 个答案:

HTML

CSS