적응형 이미지 레이아웃을 생성하기 위한 패딩(CSS 비율)

CSS 지식 포인트: 패딩/마진이 왼쪽/오른쪽이든 위/아래든 백분율 형태의 값을 가질 때 상위 요소의 너비를 기준으로 합니다!

1. CSS 백분율 패딩은 너비를 기준으로 계산됩니다.

기본 가로 문서 흐름 방향에서 CSS margin 및 padding 속성의 세로 백분율 값 둘 다 너비를 기준으로 계산되며, 이는 상단 및 하단과 같은 속성의 백분율 값과 다릅니다. 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> 요소는 항상 비율을 유지합니다. 🎜🎜비율을 고정할 수 있는 기능은 무엇인가요? 🎜🎜대부분의 레이아웃에서는 비율을 고정할 필요가 없지만, 한 가지 예외가 있는데, 바로 사진입니다. 사진의 원본 크기가 고정되어 있기 때문입니다. 기존의 고정 너비 레이아웃에서는 이미지가 안정적인 영역을 차지하도록 이미지의 특정 너비와 높이 값을 설정하지만 모바일 단말기나 반응형 개발의 경우 이미지의 최종 너비가 결정됩니다. 예를 들어 휴대폰의 배너광고의 경우 아이폰7 아래의 너비는 375이고, 아이폰7 플러스 아래의 너비는 414이며, 360 등 다른 크기도 있습니다. 이때 필요한 것은 무엇일까요? 시간은 이미지의 고정된 크기 설정이 아니라 비율 설정입니다. 🎜🎜일반적으로 다음과 같은 몇 가지 구현이 있습니다. 🎜🎜1. 높이를 고정한 다음 Background-size 속성을 ​​사용하여 다음과 같이 제어합니다. 🎜

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

🎜실시간 효과는 다음과 같습니다. 다음과 같습니다: 🎜🎜너비에 따른 변화를 볼 수 있습니다. 표시할 수 없는 이미지 영역(너비 또는 높이)이 항상 존재하므로 이는 완벽한 접근 방식이 아닙니다. 🎜🎜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🎜효과가 달성되었습니다! 🎜🎜지난해 치디안 중국어 웹사이트 모바일 버전의 여러 페이지에 배너 광고가 이런 식으로 구현되었습니다. 최종 효과는 아래 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!