CSSを使用して画像を比例的に拡大縮小する方法

画像を比例的に拡大縮小する Css メソッド: これを実現するには、[object-fit: cover;] などの object-fit 属性を使用できます。 object-fit 属性は、要素のコンテンツが指定されたコンテナーの高さと幅内にどのように収まるかを指定します。

属性の紹介:

object-fit 属性は、要素のコンテンツが指定されたコンテナーの高さと幅にどのように適応するかを指定します。 。

(学習ビデオ共有: css ビデオ チュートリアル)

object-fit は通常、img タグと video タグに使用されます。通常、これらの要素は元の要素を保持したまま切り取ることができます。比率、直接ズームまたはストレッチなど。

構文:

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

属性値:

• fill デフォルト、元の比率は保証されず、コンテンツは引き伸ばされます。コンテンツコンテナ全体。

• contain 元のサイズ比率を維持します。コンテンツは拡大縮小されます。

• cover 元のサイズ比率を維持します。ただし、一部内容がカットされる場合がございます。

• none 元の要素のコンテンツの長さと幅を保持します。つまり、コンテンツはリセットされません。

• スケールダウン 元のサイズ比率を維持します。コンテンツのサイズは none または contains と同じで、どちらか小さいオブジェクトになります。

• initial デフォルト値に設定します。

• inherit 要素の親要素から属性を継承します。

#例:

画像を切り取り、元の縦横比を維持する:

img.a {
  width: 200px;  
    height: 400px;  
    object-fit: cover;
}

関連する推奨事項:

CSS チュートリアル

以上がCSSを使用して画像を比例的に拡大縮小する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。