インタビューを行うとき、レイアウトについてよく質問されます。 多くの場合、表示プロパティの値をリストするか、要素を中央に配置する方法になります。 これは率直に私を悩ませ、私は彼がプロパティの値をどのように記憶したかではなく、レイアウトスキルをテストすることができる自分のタスクを思いつきました。
タスクの説明
多くの場合、インターネットで記事を読むと、次の問題が発生します。画像が読み込まれるとテキストがジャンプし始めます。
この問題の1つの解決策は、画像のプレースホルダーを追加することです。プレースホルダーでは、幅と高さの比率が画像の縦横比を繰り返します。
マークアップで実装を開始します。
<div class="post"> <img src="example.jpg" class="post__img" alt=" "> </div>
プレースホルダーの寸法を設定するには、画像のアスペクト比を知る必要があります。 例として、画像サイズ1920x1080pxを使用します。
ただし、このサイズの画像を表示すると、ほとんどの画面で水平スクロールで表示されます。 したがって、.post要素を最大幅640pxに設定し、画像の幅をそれに合わせて調整します。
.post { max-width: 640px; } .post__img { max-width: 100%; }
before擬似要素を使用して、ページにプレースホルダーを追加します。 また、その上に画像を配置することを忘れないでください。
.post { max-width: 640px; position: relative; } .post::before { content: ""; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
ここで、画像の幅を繰り返すためにプレースホルダーの幅が必要です。 先ほど、親の.post要素の幅の100％を画像が占めるようにしました。 display：ブロックを追加する前に、擬似要素に対しても同じことを行います。
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
友人、これで私は仕事の私の部分を終えました、そして、あなたのものは残りました。 before擬似要素の高さを計算する必要があります。
これを行うには、％値を指定してpadding-topプロパティを使用します。 これを正しく行うには、padding-topプロパティへの関心の計算の特性を知る必要があります。 また、画像サイズは1920x1080pxであることも忘れないでください。
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; /* padding-top % */ } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }
この問題を自分で解決してみてください。 しかし、困難が生じた場合、以下に私の解決策があります。
解決策
padding-topプロパティとpadding-bottomプロパティには、非常に便利な機能が1つあります。 値をパーセントで設定すると、それらは親ブロックの幅から計算されます。
したがって、これを知り、画像のサイズ（1920x1080px）を覚えて、比率を使用してプレースホルダーのパディングトップを計算できます。
padding-top = ( * 100%) / = (1080 * 100% ) / 1920 = 56.25%
ここで、 ShiとViは画像の幅と高さです。
padding-topに値を追加することは残ります。
.post { max-width: 640px; position: relative; } .post::before { content: ""; display: block; padding-top: 56.25%; } .post__img { max-width: 100%; position: absolute; top: 0; left: 0; }