WEB前端教程：图像处理二三事 - 好学星城学习论坛

page contents

WEB前端教程：图像处理二三事

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

课程目标

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

阅读学习

编码

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

将我们给出的尺寸为 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>

总结

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

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-15 10:35
阅读 ( 423 )
分类：WEB前端开发

作家榜 »

轩辕小不懂 2403 文章
小柒 1470 文章
Pack 1135 文章
Nen 576 文章
王昭君 209 文章
文双 71 文章
小威 64 文章
Cara 36 文章