CSSで繰り返しを行わずに画像を引き伸ばす設定方法

重複せずに画像のストレッチを設定する Css メソッド: 最初に "background: url("../../../static/imagic/sy.jpg")" を通じて画像パスを設定し、次に " 「no-repeat」属性を使用すると、画像を繰り返さないように設定できます。

#この記事の動作環境: Windows7 システム、HTML5&&&CSS3 バージョン、DELL G3 コンピューター

css背景画像を設定する 重複せずに全画面を引き伸ばします# これ以上の苦労はせずに、画像を表示しましょう。幅と高さを 100% しか指定していないため、この状況が発生します

<template>
  <div class="hello"></div>
</template>
 
<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  }
};
</script>

<style scoped>
.hello {
  background: url("../../../static/imagic/sy.jpg") no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;//全屏展示
}
</style>

背景: url("../../../static/imagic/sy.jpg") ——画像パスの場所。

no-repeat—— 画像は繰り返されません;

center 0px - 中央はページの左側からの位置、0px はページの上部からの位置です。

##background-position: center 0 - 画像の位置です。上記と同じです。 ;

background-size: cover;——背景画像を十分な大きさに拡張します。背景画像は背景領域を完全に覆います。背景画像の一部が背景配置領域に表示されない場合があります;

min-height: 100vh; - ウィンドウの高さ、「表示領域」とはブラウザ内の表示領域のサイズを指します、つまり window.innerWidth/window.innerHeight サイズです。

推奨学習: 「

css ビデオ チュートリアル

」

以上がCSSで繰り返しを行わずに画像を引き伸ばす設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。