图像处理二三事

课程目标

• 学习如何图片与父元素尺寸溢出时，如何调整背景图像也可以响应调整大小和缩放比例。
• 学习如何调整背景图像也可以响应调整大小和缩放比例。

阅读学习

• max-width (opens new window)
• 值与单位 (opens new window)
• 在 CSS 中调整大小 (opens new window)
• 图像、媒体 (opens new window)
• object-fit (opens new window)

编码

按照我们给出的宝格丽相框尺寸，处理比相框盒子尺寸大图像溢出问题，以及图像文字描述部分溢出

• 将我们给出的尺寸为 1920px × 1080px 的示例图片 (opens new window)添加到 img 元素之中
• 设置类名为card的盒子，宽度为 400 像素,设置它既有块元素特性，又有内敛元素特性
• 设置类名为box的盒子，宽度为 400 像素，高度 300 像素，边框为 1 像素(设置高度和宽度是包含边框在内的)
• 按照示例图给出的三种处理方式来处理图像比盒子尺寸大的问题
• 第一种,图片改变自己的原始比例，铺满整个盒子
• 第二种，图片不改变自己的原始比例，放置到盒子中去，可以不用铺满盒子
• 第三种，图片不改变自己的原始比例，铺满盒子，多余的部分被裁剪掉
• 文字部分，设置文字溢出部分用省略号显示
• 思考如果把 HTML 中的 <img>替换成<div>,图片以背景图片的形式添加上去，思考如何实现上面描述一样的效果。

<div class="card">
  <!--图片框设置400像素宽 300像素高-->
  <div class="box">
    <img
      src="https://b.bdstatic.com/searchbox/icms/searchbox/img/mountain.jpg"
    />
  </div>
  <!--文本不换行,溢出省略号表示-->
  <p class="container">
    这是一些文本 这是一些文本 这是一些文本这是一些文本 这是一些文本
    这是一些文本这是一些文本 这是一些文本 这是一些文本
  </p>
</div>

总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

• 日期，今天的学习总用时，今天学习的目标是什么，是否达成
• 哪些东西今天了解得比较透彻，说说自己的理解
• 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
• 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决