インタビュアーはCSSで固定アスペクト比を実現する方法を尋ねました

この質問に関連するニーズはまだないかもしれませんし、面接でこの質問をされたことがないかもしれませんが、最終的には必要になると思います。

この質問はよくあることですが、私が今日この質問をもう一度取り上げるのは、いつか皆さんがこの質問をされたときに、美しい答えが返ってくることを願っているからです。

ある日、「固定アスペクト比の要素を実装する方法を教えていただけますか?」と尋ねられたとします。

これを聞いたとき、盲目的に答えてはいけません。なぜなら、この質問をすると、質問が明確ではなくなるからです。そのため、面接官が質問を補足したり、要件を確認するための質問をしたりすることができます。次のように答えることができます。

要素のサイズがわかっている場合は、特に言うことはありません。幅と高さを計算して書き留めるだけです。

要素のサイズがわかっている場合は、特に言うことはありません。幅と高さを計算して書き留めるだけです。要素のサイズが不明な場合は、JavaScript を使用するのが最も簡単な方法です。CSS を使用する場合は、次のカテゴリに分けられます。

置き換えられた要素 <img> または <video> の場合、どのように実装すればよいでしょうか?
共通要素である場合、どのように実装すればよいでしょうか?

今日は、ワイマが上記の状況を皆さんと一緒に見ていきます。

まず、要素のサイズがわかっているので、これが渡されます。言うまでもなく、これを言ったら殴られるのではないかと心配です。

要素サイズが不明な場合に焦点を当てます。

そこでこの記事では、主に、交換可能な要素と通常の要素の固定アスペクト比を実現する方法に分かれています。

1. 固定アスペクト比を実現するための交換可能な要素

置換要素 ( <img>や<video>など) は、ピクセル幅と高さの概念を持つ点で他の要素とは異なります。したがって、このタイプの要素に対して固定のアスペクト比を実現したい場合、それは比較的簡単です。

幅または高さの値を指定すると、相手側が自動的に計算します。

次のように、画像要素の幅を固定し、高さを適応させます。

<div class="img-wrapper">
  <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>

.imgラッパー{
  幅：50vw;
  マージン: 100px 自動;
  パディング: 10px;
  境界線: 5px 実線ライトサーモン;
  フォントサイズ: 0;
}

画像 {
幅: 100%;
高さ: 自動;
}

効果は下の図に示されています。可視領域が拡大し続けると、画像も元の比率を維持しながら拡大することがわかります。

img要素にheight: auto;を設定していることに気付いていないかもしれません。これは、開発者やコンテンツ管理システムが HTML ソースコード内の画像にheight属性を追加することを防ぐためです。このようにして上書きすることでバグを回避できます。

また、 video要素も同様です。試してみると、効果は次のようになります。

2. 共通要素は固定のアスペクト比を実現する

上記では、置換された要素のアスペクト比を固定しましたが、この比率は主に置換された要素自体にサイズがあるためであり、この比率は元のサイズ比率によっても制限されます。明らかに、これは柔軟性がないので、通常の要素の固定アスペクト比をどのように実現するのでしょうか?

まず、最も古典的なpadding-bottom/padding-topハック方法を見てみましょう。

2.1 padding-bottom共通要素の固定アスペクト比を実現する

前の関連章「CSS のマスター」の第 3 章「可視フォーマットモデル」では、垂直方向の内側余白と外側余白をパーセンテージとして使用する場合、それらは包含ブロックの幅に基づいて計算されることを説明しました。

以下はpadding-bottom例に挙げています

padding-bottom div例にとると、幅と高さの比率が固定された要素を実現できます。

HTML:

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>

CS: ...

.ラッパー{
  幅：40vw;
}
.intrinsic-aspect-ratio-container {
  幅: 100%;
  高さ: 0;
  パディング: 0;
  パディング下部: 75%;
  マージン: 50px;
  背景色: ライトサーモン;
}

効果は以下のとおりです。

上記のコードに示すように、 div要素の高さを0設定し、 padding-bottomを使用してボックスの高さを拡張し、固定アスペクト比4/3を実現します。

これにより、固定のアスペクト比が実現されますが、只是一個徒有其表的空盒子，里面沒有內容。如果想在里面放入內容，我們還需要將。

次のように：

.intrinsic-aspect-ratio {
  位置: 相対的;
  幅: 100%;
  高さ: 0;
  パディング: 0;
  パディング下部: 75%;
  マージン: 50px;
  背景色: ライトサーモン;
}
。コンテンツ {
  位置: 絶対;
  上: 0;
  右: 0;
  下部: 0;
  左: 0;
}

このようにして、コンテンツを埋め込むことができる固定サイズのコンテナを実装できます。

さらに、より柔軟なcalc()を使用してサイズ比を計算することもできます。 padding-bottom: calc(33 / 17 * 100%);のように、任意の比率を簡単に記述できます。

上記の方法では、高さは幅に合わせて移動できますが、幅は高さに合わせて移動できないことにお気づきでしょうか。

高さに合わせて幅を移動させる方法はありますか?答えはノーです。少なくとも今のところは。しかし、将来的にはそうなるでしょう。次に、もっと簡単で便利な方法を見てみましょう。

2.2 aspect-ratio属性は要素のアスペクト比を指定する

固定アスペクト比の必要性は長い間存在していたため、 padding-bottomを使用したハッキングは直感的ではなく、要素のネストが必要になります。

この問題を回避するために、W3C CSS ワーキンググループはすでにこのようなプロパティaspect-ratioの実装に取り組んでいます。この計画は提案されていますが、まだどのブラウザも実装していません。まだ設計段階にあり、ワーキンググループのドラフトはまだ公開されておらず、編集者のドラフトのみです。

しかし、これは私たちがこの新しい技術を事前に知ることを妨げるものではありません。

どれくらい便利か見てみましょう。

aspect-ratioの構文形式は次のとおりです: aspect-ratio: <widtu-ratio>/<height-ratio> 。

以下に示すように、 widthまたはheightをautoに設定し、 aspect-ratioを指定できます。他の値は比例して自動的に変化します。

/* 高度追跡 */
.box1 {
  幅: 100%;
  高さ: 自動;
  アスペクト比: 16/9;
}

/*幅のフォローアップ*/
.box2 {
高さ: 100%;
幅: 自動;
アスペクト比: 16/9;
}

この手法は、要素の固定アスペクト比を実現するのに非常に柔軟であり、幅または高さのいずれかを指定できます。ただ、ブラウザ実装はまだありませんので、一緒に楽しみにしていきましょう。

結論

この記事では、要素の固定アスペクト比を実現する方法をまとめます。面接中にこの質問をされた場合。次のように答えることができます。

要素のサイズがわかっている場合は、特に言うことはありません。幅と高さを計算して書き留めるだけです。

要素のサイズが不明な場合、最も簡単な方法は JavaScript を使用することです。CSS を使用する場合は、いくつかの方法があります。

置換要素<img>または<video>の場合は、 width / heightのどちらか一方を設定し、もう一方をautoに設定すると、置換要素は固有のサイズに応じて変化します。
通常の要素であれば、 padding-top / padding-bottomを使用して固定のアスペクト比をシミュレートできますが、この方法は柔軟性が低く、幅に応じて高さのみを変更することができます。 CSS ワーキンググループは現在、アスペクト比を簡単に指定できる新しいソリューションaspect-ratioを導入していますが、これを実装しているブラウザーはまだありません。近い将来、ブラウザはこの機能を徐々に実装するだろうと考えています。

最終的にあなたの答えがこのようなものであった場合、あなたは教師の質問設定を改善し、さまざまな状況に対する解決策を提供しただけでなく、標準で策定されている新しい解決策も指摘したことになります。このような回答は、問題に対する厳密な検討を示すだけでなく、常に標準の策定に注意を払っていることも示しており、大きなプラスポイントとなります。この場合、この面接の席を確保したとしか言えません。

参考リンク

アスペクト比ボックス

CSS のアスペクト比ユニットの設計

CSS ボックスサイズモジュールレベル 4

インタビューアーの質問「CSSで固定アスペクト比を実現する方法」に関するこの記事はこれで終わりです。CSS固定アスペクト比に関する関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: 初心者のための HTML コーディングガイドライン 30 選

>>: MySQL の効率的なクエリの左結合とグループ化 (プラスインデックス)