这个时候，我们可以借助 object-fit，它能够指定可替换元素的内容（也就是图片）该如何适应它的父容器的高宽。
ul li img { width: 150px; height: 100px; object-fit: cover; }利用 object-fit: cover，使图片内容在保持其宽高比的同时填充元素的整个内容框。
object-fit 还有一个配套属性 object-position，它可以控制图片在其内容框中的位置。（类似于 background-position），m默认是 object-position: 50% 50%，如果你不希望图片居中展示，可以使用它去改变图片实际展示的 position 。
ul li img { width: 150px; height: 100px; object-fit: cover; object-position: 50% 100%; }像是这样，object-position: 100% 50% 指明从底部开始展示图片。这里有一个很好的 Demo 可以帮助你理解 object-position。
CodePen Demo -- Object position
考虑屏幕 dpr -- 响应式图片正常情况下，图片的展示应该没有什么问题了。但是对于有图片可展示的情况下，我们还可以做的更好。
在移动端或者一些高清的 PC 屏幕（苹果的 MAC Book），屏幕的 dpr 可能大于 1。这种时候，我们可能还需要考虑利用多倍图去适配不同 dpr 的屏幕。
正好，<img> 标签是有提供相应的属性 srcset 让我们进行操作的。
<img src='http://www.likecs.com/photo@1x.png' srcset='photo@1x.png 1x, photo@2x.png 2x, photo@3x.png 3x' />当然，这是比较旧的写法，srcset 新增了新的 w 宽度描述符，所以更好的写法是：
<img src = "photo.png" srcset = “photo@1x.png 300w, photo@2x.png 600w, photo@3x.png 1200w, >利用 srcset，我们可以给不同 dpr 的屏幕，提供最适合的图片。
上述出现了一些概念，dpr，srcset 属性，不太了解的可以移步 前端基础知识概述
图片丢失好了，当图片链接没问题时，已经处理好了。接下来还需要考虑，当图片链接挂了，应该如何处理。
处理的方式有很多种。最好的处理方式，是我最近在张鑫旭老师的这篇文章中 -- 图片加载失败后CSS样式处理最佳实践 看到的。这里简单讲下：
利用图片加载失败，触发 <img> 元素的 onerror 事件，给加载失败的 <img> 元素新增一个样式类
利用新增的样式类，配合 <img> 元素的伪元素，展示默认兜底图的同时，还能一起展示 <img> 元素的 alt 信息
<img src="http://www.likecs.com/test.png" alt="图片描述" onerror="this.classList.add('error');"> img.error { position: relative; display: inline-block; } img.error::before { content: ""; /** 定位代码 **/ background: url(error-default.png); } img.error::after { content: attr(alt); /** 定位代码 **/ }我们利用伪元素 before ，加载默认错误兜底图，利用伪元素 after，展示图片的 alt 信息：
OK，到此，完整的对图片的处理就算完成了，完整的 Demo 你可以戳这里看看：
CodePen Demo -- html">图片处理
交互设计优化接下来一个大环节是关于一些交互的细节。对于交互设计，一些比较通用的准则：
Don’t make me think
符合用户的习惯与预期
操作便利
做适当的提醒
不强迫用户
过渡与动画在我们的交互过程中，适当的增加过渡与动画，能够很好的让用户感知到页面的变化。
譬如我们页面上随处可见 loading 效果，其实就是这样一种作用，让用户感知页面正在加载，或者正在处理某些事务。
滚动也是操作网页中非常重要的一环。看看有哪些可以优化的点：
滚动平滑：使用 scroll-behavior: smooth 让滚动丝滑使用 scroll-behavior: smooth，可以让滚动框实现平稳的滚动，而不是突兀的跳动。看看效果，假设如下结构：
<div> <nav> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> </nav> <div> <section>First section</section> <section>Second section</section> <section>Third section</section> </div> </div>不使用 scroll-behavior: smooth，是突兀的跳动切换：
给可滚动容器添加 scroll-behavior: smooth，实现平滑滚动：
{ scroll-behavior: smooth; }