0

かなりの数のポリフィル プラグインを見てきましたが、それらはすべて、メディア クエリに応じて img タグの挿入に依存しているようです。

私がやりたいのは、さまざまなサイズの画像をロードすることですが、インライン CSS を使用して順序付けされていないリストの背景画像として表示することです。

つまり、次のようなものです。

@media (min-width: 768px)

<ul style="background-image:(path to medium image)">
     <li class="hover"></li>
     <li class="hover"></li>
</ul>

@media (min-width: 1280px)

<ul style="background-image:(path to large image)">
     <li class="hover"></li>
     <li class="hover"></li>
</ul>

これは可能ですか？img タグを使用してこれを実装する方法はありますか? リーホバーがその中に収まるように、写真に合うようにULが必要です。

編集-メディアクエリを使用してページにスタイルブロックを直接追加することを考えていたので、サーバーデータを使用して動的に入力できます。

<style>
@media (min-width: 768px) {
      .image { background-image: <%: model.small-image %>; }
}

@media (min-width: 1280px) {
      .image { background-image: <%: model.large-image %>; }
}
</style>

それは実行可能な解決策ですか？

4

1 に答える 1

1

私があなたの質問を正しく理解しているなら、次のようなことから始める必要があります。

HTML 

<ul class="ul-background">
<li>one</li>
<li>two</li>
</ul>

CSS 

@media (max-width: 767px) {

.ul-background{
background-image: url('path-to-tablet-image.jpg');
background-repeat:no-repeat;
background-size:contain;
}
}

スマートフォン/タブレット/デスクトップ用に異なる背景画像で異なるメディア リクエストを使用します。

background-size:contain または background-image:cover を使用して、背景画像をスペースに合わせる方法を微調整できます。

これで何ができるかについての詳細を含むいくつかのリンク:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
http://css-tricks.com/perfect-full-page-background-画像/

幸運を！

于 2013-08-23T16:02:29.030 に答える