ホームページ > 記事 > ウェブフロントエンド > CSS で画像をアダプティブにするにはどうすればよいですか? CSS画像のサイズを適応させる方法の紹介

CSS で画像をアダプティブにするにはどうすればよいですか? CSS画像のサイズを適応させる方法の紹介

不言オリジナル: 2018-09-11 13:45:0819536ブラウズ

ウェブページの場合、見栄えがよく鮮明な背景画像は非常に魅力的ですが、すべての画像が同じサイズであるわけではないため、西安の画像を調整する必要があります。では、CSS でどのように作成できるでしょうか。 image アダプティブについてはどうですか?この記事ではCSS画像のサイズを適応させる方法を紹介します。

例を直接見てみましょう:

<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... --></div>

#web_bg{
  position:fixed;  
  top: 0;  
  left: 0;  
  width:100%;  
  height:100%;  
  min-width: 1000px;  
  z-index:-10;  
  zoom: 1;  
  background-color: #fff;  
  background-repeat: no-repeat;  
  background-size: cover;  
  -webkit-background-size: cover;  
  -o-background-size: cover;  
  background-position: center 0;
}

上の例では、この CSS コードが画像のサイズを適応的に変更する方法を分析してみましょう。

まず、CSS 画像適応サイズにおけるこれら 3 つの文の役割を見てみましょう:

  position:fixed;  
  top: 0;  
  left: 0;

説明: これら 3 つの文は、画面の上部と左側にある div コンテナ全体を修正するためのものです。

次に、CSS 画像適応サイズにおける次の文の役割を見てみましょう:

  width:100%;  
  height:100%;  
  min-width: 1000px;

説明: これらの文は div 全体を画面と同じサイズにし、それによって全画面効果を実現し、最小この実装では、画面幅が 1000 ピクセル以内の場合、div のサイズを変更しないことができます。つまり、この場合、画面幅をスケーリングするときに、画像はスケーリングされません (1000 ピクセル内でのみ有効)。

次に、このコードを見てみましょう:

  z-index:-10;

説明: これは、HTML ページの各レベルの下に div 全体を配置することです。通常の状況では、最初に作成されたレベルの z-index 値は 0 であるため、ここに -1 を書いても達成できますが、ここで -10 と書くのは、div 全体が必ず最後に来るようにするためです。ページ内のレベルが多すぎる場合、-1 を使用しても必ずしも最後に来るとは限らないからです。 , しかし、このように-100と書かれても大きな数字は意味がありません。使用インデックス:-10 このように、一見すると背景画像のように見えますが、実は最も普通のdivです。階層関係を変えただけで背景画像のように見えます。

  background-repeat: no-repeat;

注: これは背景です。繰り返さないでください。

  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

説明: 上記の 3 つの文は同じ意味で、画像を画面サイズに同期して拡大縮小しますが、一部の部分が切り取られる可能性がありますが、露出されません。次の 2 つの文は Chrome との互換性のためです。および Opera ブラウザ。

最後に、最後の文を見てみましょう:

background-position: center 0;

説明: 上の文は、画像の位置を中央揃え、左揃えを意味します。

上記の記事はここで終わります。上記の CSS コードで言及されているさまざまなプロパティについて詳しく知りたい場合は、CSS マニュアルを参照してください。

CSS で画像をアダプティブにするにはどうすればよいですか? CSS画像のサイズを適応させる方法の紹介

関連記事