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 に答える