CSS を使用してアスペクト比を維持し、Div を中央に配置する方法

幅と高さに応じてアスペクト比を維持する

div のアスペクト比を確実に維持することは、レスポンシブ デザインにとって不可欠です。これにより、要素の寸法や向きに関係なく、要素の比率が一貫したままになります。

CSS のみを使用してこれを実現するには、最新の aspect-ratio プロパティを利用できます。

アスペクト-Ratio プロパティ

アスペクト比プロパティは、要素の幅と高さの比率を指定します。たとえば、値 1 / 1 は正方形を作成し、16 / 9 は 16:9 ディスプレイと同じアスペクト比の長方形を作成します。

Div を水平方向および垂直方向にセンタリング

要素を親内で水平方向および垂直方向に中央揃えにするには、次の CSS プロパティを使用できます。

margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

コード例

アスペクト比と中央揃えプロパティを組み合わせて、ビューポート内で中央に配置されながらアスペクト比を維持する正方形の div:

.ar-1-1 {
  aspect-ratio: 1 / 1;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
}

このコードは、1:1 のアスペクト比を維持しながら、ビューポート全体を占める正方形の div を作成します。 div はビューポート内で水平方向と垂直方向の両方で中央に配置されます。

追加メモ

• アスペクト比プロパティはまだすべてのブラウザーでサポートされていませんが、最新のブラウザーではサポートされています。 Chrome、Firefox、Safari など。
• 古いブラウザとの互換性を確保するには、[picturefill](https://github.com/scottjehl/picturefill) や [respond.js](https ://github.com/scottjehl/Respond).

以上がCSS を使用してアスペクト比を維持し、Div を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。