1

私が編集しているワードプレスのテーマ (CSS の編集) を使用して、デスクトップおよびモバイル ユーザー向けの Web サイトを作成しています。私の問題は、前面の画像が大きく、解像度の低いユーザー (携帯電話など) が Web サイトに接続すると、画像のサイズが変更され、小さな部分が 1 つしか表示されないことです。私の問題を説明するスクリーンショットは次のとおりです。

デスクトップ ユーザーがアクセスする通常の Web サイトは次のとおりです。

デスクトップ ユーザー

そして、解像度の低いユーザーがウェブサイトに接続すると（つまり、携帯電話で）、ウェブサイトが縮小されました

携帯電話のユーザー

ご覧のとおり、画像は見栄えが悪くなります。画像全体がその画面に収まるように解像度が低いときに画像を縮小する方法はありますか?

この画像を表示するために使用している CSS は次のとおりです。これは、DIV といくつかの段落のコンテナーです。

* =Featured Content
-------------------------------------------------------------- */

#featured {
 -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  padding-bottom: 40px;
  width: 99.893617021277%;
}

#featured p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  color: #8B0000;
padding-top:250px;
padding-left:50px;
  text-align: left;
width:100%
}
#featured p1 {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
  font-style:italic;
  color: #8B0000;
padding-top:50px;
padding-left:50px;
  text-align: left;
width:100%;

}

#featured-image {
  margin: 40px 0 0 0;
}

#featured-image .fluid-width-video-wrapper {
  margin-left: -20px;
}

.featured-image img {
  margin-top: 44px;
}

画像のクラスは次のとおりです。

    .col-940new {
  width: 100%;
  height:460px;
  background: url('uploads/19377249_ml-1024x6651.jpg');
}

この要素に使用される HTML は次のとおりです。

<div id="featured" class="grid col-940new">
        <div class="grid col-460">

            <h1 class="featured-title">
                            </h1>

            <h2 class="featured-subtitle">
                            </h2>

            <p>


            </p>



        </div><!-- end of .col-460 -->

        <div id="featured-image" class="grid col-460 fit">



        </div><!-- end of #featured-image --> 

    </div><!-- end of #featured -->

編集：

以下にコメントされているいくつかの方法を適用した後、問題を修正することができましたが、ユーザーが携帯電話でウェブサイトに接続するときに削除したい「空白」があります。

次の行が追加されていることを除いて、コードは同じです。

  background-size: 100% auto;

携帯電話からのユーザー ビュー

4

2 に答える 2

0

background-size の両方のコンポーネントが指定されていて、auto でない場合: 背景画像は指定されたサイズでレンダリングされます。

background-size が contain または cover の場合: 画像は、背景の配置領域に含まれる、または覆う最大サイズで、固有の比率を維持してレンダリングされます。画像に固有の比率がない場合は、背景の配置領域のサイズでレンダリングされます。

background-size が auto または auto autoの場合: 画像に両方の固有の寸法がある場合、画像はそのサイズでレンダリングされます。固有の寸法と固有の比率がない場合は、背景の配置領域のサイズでレンダリングされます。寸法がなく、比率がある場合は、contain が指定されているかのようにレンダリングされます。画像に 1 つの固有の寸法と比率がある場合、その 1 つの寸法と比率によって決定されるサイズでレンダリングされます。画像に 1 つの固有の寸法があり、縦横比がない場合、固有の寸法と背景配置領域の対応する寸法を使用してレンダリングされます。

background-size に 1 つの自動コンポーネントと 1 つの非自動コンポーネント がある場合: 画像に固有の比率がある場合は、指定された寸法を使用してレンダリングし、指定された寸法と固有の比率から他の寸法を計算します。画像に固有の比率がない場合は、その寸法に指定された寸法を使用します。他の寸法については、画像に対応する固有の寸法があればそれを使用します。そのような固有の寸法がない場合は、背景配置領域の対応する寸法を使用します。

ソース

あなたの場合、幅と高さの両方に本質的な価値があるためbackground-size: 100% 100%;、モバイルデバイスでも機能する可能性のあるものを追加してみてください。しかし、あなたの画像は引き伸ばされているので、引き伸ばされたくない場合は、この魔法が起こるように最後にカバーを追加してください:

background-size: 100% cover;
于 2013-08-26T02:32:51.390 に答える
0

これは背景画像なので、これを CSS に追加します。

デモjsFiddle

.col-940new {
  width: 100%;
  height:460px;
  background-image:url('uploads/19377249_ml-1024x6651.jpg');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}
于 2013-08-25T12:14:28.027 に答える