画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)

CSSの知識ポイント：padding/marginがパーセンテージの形式で値を取る場合、左/右でも上/下でも親要素の幅を基準にします！

1. CSS のパディングのパーセンテージは、幅に対して相対的に計算されます

デフォルトの水平方向のドキュメント フロー方向では、CSS の margin 属性と padding 属性の垂直方向のパーセンテージ値が計算されます。幅に対して相対的に計算され、top や bottom などの属性のパーセンテージ値とは異なります。 margin和padding属性的垂直方向的百分比值都是相对于宽度计算的，这个和top, bottom等属性的百分比值不一样。

这么设计的原因在我的新书（应该不出几个月就要出版了）中会有说明，这里不展开。

对于padding属性而言，任意方向的百分比padding都现对于宽度计算可以让我们轻松实现固定比例的块级容器，举个例子，假设现在有个<p></p>元素：

p { padding: 50%; }

或者：

p { padding: 100% 0 0; }

或者：

p { padding-bottom: 100%; }

则这个<p></p>元素尺寸就是一个宽高1:1的正方形，无论其父容器宽度是多少，这个<p></p>元素总能保持比例不变。

这种能固定比例的特性什么作用呢？

对于绝大多数都布局，我们并不要求非要比例固定，但是有一种情况例外，那就是图片，因为图片原始尺寸它是固定的。在传统的固定宽度的布局下，我们会通过给图片设定具体的宽度和高度值，来保证我们的图片占据区域稳固；但是在移动端或者在响应式开发情况下，图片最终展现的宽度很可能是不确定的，例如手机端的一个通栏广告，iPhone7下宽度是375，iPhone7 Plus下是414，还有360等尺寸，此时需要的不是对图片进行固定尺寸设定，而是比例设定。

通常有如下一些实现：

1. 固定一个高度，然后使用background-size属性控制，如下：

.banner {
 height: 40px;
 background-size: cover;
}

实时效果如下：

可以看到随着宽度的变化，总会有部分图片区域（宽度或高度）无法显示，并不是完美的做法。

2. 使用视区宽度单位vw，如下：

.banner {
 height: 15.15vw;
 background-size: cover;
}

如果对兼容性要求不是很高，使用vw也是一个不错的做法，至少理解起来要更轻松一点。

但是，如果我们的图片不是通栏，而是需要离左右各1rem的距离，此时，我们的CSS代码就要啰嗦点了，想要保持完美比例，就使用借助CSS3 calc()计算：

.banner {
 height: calc(0.1515 * (100vw - 2rem));
 background-size: cover;
}

如果，图片距离两侧的宽度是动态不确定的，则，此时calc()也捉襟见肘了，但，恰恰是普普通通其貌不扬的padding属性，其兼容性和适应性都一级棒。

3. 使用百分比padding，如下：

.banner {
 padding: 15.15% 0 0;
 background-size: cover;
}

此时无论图片的外部元素怎么变动，比例都是恒定不变的。

二、CSS百分比padding与宽度自适应图片布局

但是有时候我们的图片是不方便作为背景图呈现的，而是内联的<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/118/027/fd1fd8b5da689c087b7559dd0565c11f-0.gif?x-oss-process=image/resize,p_40" class="lazy" alt="画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)" >，百分比padding也是可以轻松应对的，求套路是比较固定的，图片元素外面需要一个固定比例的容器元素，例如下面的HTML结构：

<p class="banner">
 <img  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/118/027/fd1fd8b5da689c087b7559dd0565c11f-0.gif?x-oss-process=image/resize,p_40"  class="lazy"  banner.jpg alt="画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)" >
</p>

.banner元素同样负责控制比例，然后图片填充.banner元素即可，CSS代码如下：

.banner {
 padding: 15.15% 0 0;
 position: relative;
}
.banner > img {
 position: absolute;
 width: 100%; height: 100%;
 left: 0; top: 0;
}

效果就达成了！

眼见为实，去年起点中文网手机版诸多页面的通栏广告就都是这么实现的，最终的效果参见下面的gif截图（如果图无法显示，可以评论反馈）：

可以看到，无论屏幕宽度多宽，我们的广告图片比例都是固定的，不会有任何剪裁，不会有任何区域缺失，布局就显得非常有弹性，也更健壮。

————-

其实，我之前一直低估百分比padding的实际应用价值，因为有vw单位的存在，毕竟理解vw看上去要更简单一些，所以，一直就没做相关技巧的介绍。但是，随着图片相关布局处理越来越多，我发现，百分比padding的实用价值要比想象的大，要比vw

このデザインの理由については、私の新しい本 (数か月以内に出版される予定です) で説明するので、ここでは説明しません。 <p></p> padding 属性の場合、任意の方向の padding の割合が幅に対して計算され、固定比率のブロックレベルのコンテナーを簡単に実装できます。 <p></p> 要素があるとします:

img { width: 100%; }

または: 🎜

<p class="works-item-t">
  <img  src="/static/imghwm/default1.png"  data-src="./150x200.png"  class="lazy"   alt="画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)" >
</p>

🎜 または: 🎜

.works-item-t {
 padding-bottom: 133%;
 position: relative;
}
.works-item-t > img {
 position: absolute;
 width: 100%; height: 100%;
}

🎜、この <p></p> 要素のサイズは幅と高さが 1:1 の正方形。親コンテナの幅に関係なく、この <p></p> 要素は常にその比率を維持します。 🎜🎜比率を固定できるこの機能の機能は何ですか? 🎜🎜ほとんどのレイアウトでは、比率を固定する必要はありませんが、例外が 1 つあります。それは、画像の元のサイズが固定されているためです。従来の固定幅レイアウトでは、画像が安定した領域を占めるように画像の特定の幅と高さの値を設定しますが、モバイル端末やレスポンシブ開発の場合は、画像の最終的な幅が決まります。非常に小さいです。不確実かもしれません。たとえば、携帯電話のバナー広告の場合、iPhone 7 の下の幅は 375、iPhone 7 Plus の下の幅は 414、その他にも 360 などのサイズがあります。時間は画像の固定サイズ設定ではなく、比率設定です。 🎜🎜通常、次のような実装があります: 🎜🎜1. 次のように、高さを固定し、background-size 属性を使用してそれを制御します: 🎜

.img-box {
 padding: 0 50% 66.66% 0;
}

🎜 リアルタイム効果は次のとおりです。 🎜🎜 width の変化を確認できますが、画像領域 (幅または高さ) には表示できない部分が常に存在しますが、これは完璧なアプローチではありません。 🎜🎜2. 次のように、ビューポート幅の単位 vw を使用します: 🎜rrreee🎜 互換性要件がそれほど高くない場合は、少なくとも vw を使用することも良い方法です。もっとリラックスしてください。 🎜🎜ただし、画像がバナーではなく、左側と右側から 1rem 離れている必要がある場合、現時点で CSS コードを維持する必要がある場合は少し面倒になります。完璧な比率を求めるには、CSS3 calc() 計算を使用します: 🎜rrreee🎜 画像の両側からの幅が動的に不確実な場合、calc() も同様に計算されます。この時点では伸びていますが、 padding 属性こそ平凡で目立たないものですが、その互換性と適応性は優れています。 🎜🎜3. 次のように、パーセンテージ padding を使用します。 🎜rrreee🎜 このとき、画像の外部要素がどのように変化しても、比率は一定です。 🎜🎜2. CSS パーセンテージ パディングと幅適応型画像レイアウト🎜🎜 ただし、画像が背景画像として表示するには都合が悪い場合もありますが、インライン <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/118/027/fd1fd8b5da689c087b7559dd0565c11f-0.gif?x-oss-process=image/resize,p_40" class="lazy" alt="画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)" >、パーセンテージ padding ルーチンも比較的固定されています。次の HTML 構造のように、固定比率のコンテナ要素が必要です: 🎜rrreee🎜.banner 要素は同じです。比率を制御し、.banner 要素で画像を塗りつぶします。CSS コードは次のとおりです。 🎜rrreee🎜 効果が得られます。 🎜🎜百聞は一見に如かず。昨年、Qidian 中国語 Web サイトのモバイル版の多くのページにバナー広告が実装されました。最終的な効果については、下の gif スクリーンショットをご覧ください (画像が表示できない場合は、そのままにしておいてください)。コメントしてフィードバックを送信してください): 🎜🎜🎜🎜画面の幅がどんなに広くても、広告画像の比率は同じであり、クリッピングや欠落がなく、レイアウトが非常に柔軟で堅牢であることがわかります。 🎜🎜————-🎜🎜実際、私は vw ユニットの存在により、padding の実際の適用値を常に過小評価していました。 code>vw の方が簡単そうなので、関連するテクニックは紹介していません。しかし、処理される画像関連のレイアウトが増えるにつれて、padding の割合の実際的な値は想像よりも大きく、vw よりも多くのシナリオに適用できることがわかりました。互換性の向上 (パーセント機能 IE6+ サポート、画像カバー率 100% IE8+ サポート)。 🎜🎜複雑なレイアウトの場合、画像の幅が固定されておらず適応的でない場合、通常、画像の幅のみを設定するというトリックを考えます。たとえば、次のとおりです。 🎜rrreee🎜このとき、ブラウザはデフォルトの画像比率 画像の幅が増加すると高さも増加し、画像の幅が減少すると高さも減少することを示しています。開発者は画像の実際の比率を気にしていないようです。 🎜

然而这种技巧有一个非常不好的体验问题，那就是随着页面加载的进行，图片占据的高度会有一个从0到计算高度的图片变化，视觉上会有明显的元素跳动，代码层面会有布局重计算。

所以对图片高宽进行同时约定还是有必要的，但是同时要保证宽度自适应，似乎有点难度。记住，如果遇到这种需求场景，没有比百分比padding布局更好的做法！

缩小浏览器宽度可以看到不同宽度下的布局效果，Gif效果截图如下：

此demo难点就是图片自适应同时保持比例，以及页面刷新的时候没有布局稳固不晃动，其核心HTML和CSS代码如下：

<p class="works-item-t">
  <img  src="/static/imghwm/default1.png"  data-src="./150x200.png"  class="lazy"   alt="画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)" >
</p>

.works-item-t {
 padding-bottom: 133%;
 position: relative;
}
.works-item-t > img {
 position: absolute;
 width: 100%; height: 100%;
}

可以看到，当把垂直方向padding值只使用padding-bottom表示的时候，如果没有text-align属性干扰，<img alt="画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)" >元素的left:0;top:0是可以省略的。

对于这种图片宽度100%容器，高度按比例的场景，padding-bottom的百分比值大小就是图片元素的高宽比，就这么简单。

但，有时候，图片宽度并不是100%容器的，例如，图片宽度50%容器宽度，图片高宽比4:3，此时，CSS垂直方向百分比就666了，如下：

.img-box {
 padding: 0 50% 66.66% 0;
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

css登录界面美化

css如何实现鼠标滑过缩略图时放大图片

css实现鼠标触发效果

以上が画像アダプティブ レイアウトを作成するためのパディング (CSS パーセンテージ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。