css体验优化之图片容器设置宽高比

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 需求 我们在做web页面的时候,经常会有一些图片列表,例如下图的视频列表以及表情列表:        需求要求: 1. 列表是responsive的,在不同宽度的浏览器下面,图片要自适应容器宽度 2.

需求

我们在做web页面的时候,经常会有一些图片列表,例如下图的视频列表以及表情列表:

      

需求要求:

1. 列表是responsive的,在不同宽度的浏览器下面,图片要自适应容器宽度

2. 图片在自适应的过程中,图片的长宽比要保持不变

 

常规解决方案

在container宽度固定的需求中(比如PC版页面),我们直接设置图片容器或者图片为固定的宽高就好了,比如:

1 img{
2     width:330px;
3     height:180px;
4 }

 

但是这个不能满足需求,为了满足上面的需求两点,通常我们会想到通过设置图片的宽度为百分比来满足第1点,不设置高度来满足到第2点(容器的height不能根据width设置百分比),简单代码如下:

 1 ul{
 2     list-style:none;
 3 }
 4 ul li{
 5     float:left;
 6     width:100%;
 7     padding:5px;
 8 }
 9 ul li img{
10     width:100%;
11 }

 

视频时间的代码就不写出来了,通过绝对定位来做即可。

 

存在的问题

上面的解决方案虽然可行,但是条件又点苛刻,并且体验不好,为什么呢?

1. 为了做到完美显示,运营同学在配置图片的时候必须做到图片的长宽比完全一致,不能有一个像素的差别,否则会出现如下图情况:

上图中第一张图比其他三张图高一个像素,由于不能设置图片容器的高度,所以对图片大小就必须要严格控制。

2. 体验不好。当网络不佳,图片还没有加载出来的情况下,你可能看到如下图:

由于图片没有加载出来,图片没有占位,当图片加载出来后,再把容器撑高,这样的体验非常不好(特别是图片内容在首屏的时候)。

有人可能会说,使用默认图片来占位,但是有时候,在网络情况恶劣的情况下,默认图片都可能加载不出来。

 

优化方案

 为了解决上面两个存在的问题,我想到了一种使用图片容器进行占位的方法。首先我们要了解一个css的知识点,块级元素(如div,p)的padding设置为百分比的时候,是按照容器的宽度来定的,那么我们可以按照图片的比例来设置容器的高度(使用padding-top/padding-bottom),图片则使用绝对定位显示在容器的下层。

html:

 1 <div class="section-video">
 2   <ul class="list">
 3     <li>
 4       <a href="https://www.youtube.com/embed/vCS_Nl4R9W8">
 5         <div class="img">
 6           <img class="" src="http://down2.9apps.com:7080/group1/M00/76/E4/pYYBAFdlMBaAAKvkAAA0HBzaV9E798.jpg" alt="logo">
 7           <span class="time">07:12</span>
 8         </div>
 9         <span class="title">ЕВРО 2016 - ЖЕСТЬ! ТРЕНЕР СБОРНОЙ ГЕРМАНИИ ОПОЗОРИЛСЯ НА ВЕСЬ МИР</span>
10       </a>
11     </li>
12     <li>
13       <a href="https://www.youtube.com/embed/8H2VfEO4n1k">
14         <div class="img">
15           <img class="" src="http://down2.9apps.com:7080/group1/M00/B0/71/qIYBAFdlMBWARAEqAAArw8xAvK8090.jpg" alt="logo">
16           <span class="time">04:58</span>
17         </div>
18         <span class="title">ЧЕХИЯ - ХОРВАТИЯ 2:2 ОБЗОР МАТЧА </span>
19       </a>
20     </li>
21     <li>
22       <a href="https://www.youtube.com/embed/R5kRrJuolak">
23         <div class="img">
24           <img class="" src="http://down2.9apps.com:7080/group1/M01/76/E4/poYBAFdlMBmAKGmxAAA7r722CEs285.jpg" alt="logo">
25           <span class="time">03:54</span>
26         </div>
27         <span class="title">ИСПАНИЯ - ТУРЦИЯ 3:0 ОБЗОР МАТЧА </span>
28       </a>
29     </li>
30     <li>
31       <a href="https://www.youtube.com/embed/zjKbunbkU78">
32         <div class="img">
33           <img class="" src="http://down2.9apps.com:7080/group1/M00/76/E4/pYYBAFdlMBuAO13wAAA-uPs5iqo997.jpg" alt="logo">
34           <span class="time">03:14</span>
35         </div>
36         <span class="title">ИТАЛИЯ - ШВЕЦИЯ 1:0 ОБЗОР </span>
37       </a>
38     </li>
39   </ul>
40 </div>

 

css:

 1 * {
 2   box-sizing: border-box;
 3 }
 4 
 5 .section-video ul.list {
 6   padding: 5px;
 7   width: 100%;
 8   font-size: 12px;
 9   background-color: #0363b5;
10   list-style: none;
11   overflow: hidden;
12 }
13 
14 .section-video ul.list li {
15   display: inline-block;
16   width: 50%;
17   padding: 5px;
18   float: left
19 }
20 
21 .section-video ul.list li a {
22   display: block;
23   width: 100%;
24   color: #fff;
25   text-decoration: none;
26 }
27 
28 .section-video ul.list li .img {
29   width: 100%;
30   position: relative; // 使用相对定位
31   height: 0; // 高度设置为0,使用padding来设置高度
32   overflow: hidden;
33   padding-bottom: 54.545454%; // 使用padding-top也可,使用padding来撑高容器,高度为宽度的 54.545454%
34 }
35 
36 .section-video ul.list li .img img {
37   position: absolute; // 使用绝对定位
38   width: 100%; // 宽高为容器的宽高
39   height: 100%;
40   top: 0;
41   left: 0
42 }
43 
44 .section-video ul.list li .img .time {
45   position: absolute;
46   display: inline-block;
47   right: 0;
48   bottom: 15px;
49   font-size: 12px;
50   line-height: 18px;
51   background-color: rgba(0, 0, 0, .48);
52   border-top-left-radius: 8px;
53   border-bottom-left-radius: 8px;
54   padding: 0 10px
55 }
56 
57 .section-video ul.list li .title {
58   display: block;
59   line-height: 18px;
60   padding: 4px 0;
61   height: 40px;
62   overflow: hidden;
63   text-overflow: ellipsis
64 }

 

这种情况及时配置的图片有点小误差,我们也可以忽略。

使用优化方案后,当图片加载不出来的时候,容器的位置不会消失,如下图:

那么对于体验上来说,整个页面不会在图片加载的时候出现撑高的情况。

 

解决方案代码演示:https://jsfiddle.net/boxiang_hbx/wrf4xshn/3/

当前两张图没有load出来的时候,代码演示:https://jsfiddle.net/boxiang_hbx/wrf4xshn/4/

 

改优化方案可以巧妙地用于其他布局的地方,不限于图片,有问题,欢迎讨论!

 

尊重版权,转载请说明出处!

 

目录
相关文章
|
12天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
1月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
1天前
|
Web App开发 前端开发 JavaScript
如何检测 CSS 性能瓶颈并进行优化?
【10月更文挑战第28天】通过使用上述性能检测工具,结合对常见CSS性能瓶颈的分析和相应的优化方法,可以有效地提高CSS的性能,提升网页的加载速度和渲染效率,为用户提供更流畅、快速的浏览体验。
|
1天前
|
编解码 前端开发 JavaScript
如何根据性能检测结果进行 CSS 优化?
【10月更文挑战第28天】根据性能检测结果进行CSS优化需要综合考虑多个方面的因素,针对不同的问题采取相应的优化措施,不断调整和改进CSS代码,以提高页面的性能和用户体验。同时,在优化过程中要注意保持CSS代码的可读性和可维护性,确保优化后的代码仍然易于理解和修改。
|
1天前
|
前端开发 UED 异构计算
CSS优化技巧
【10月更文挑战第28天】通过应用这些CSS优化技巧,可以提高CSS代码的质量和性能,使页面加载更快、更流畅,同时也更易于维护和扩展,提升整个Web项目的开发效率和用户体验。
|
1天前
|
前端开发 JavaScript UED
|
18天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
42 1
|
27天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
38 2
|
24天前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
20 0
|
2月前
|
JavaScript 前端开发
jQuery - 获取并设置 CSS 类
jQuery - 获取并设置 CSS 类
16 1

热门文章

最新文章