1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

图像的尺寸

通过 widthheight 属性可以设置图像的尺寸,图像元素的实际尺寸计算方法如下:

  • 如果同时指定了宽高,那将作为图像的实际尺寸。
  • 如果只指定了宽和高中的一边长度,另一边长度会根据原图的宽高比确定,最终图像元素与原图的宽高比一致。
  • 如果宽和高都没有指定,那么按照原图的尺寸来作为实际尺寸。

图像适应模式

object-fit 指定了图像如何去适应自身宽高确定的元素容器,有以下取值:

  • fill:默认值,图像实际尺寸会被拉伸至元素容器的尺寸。
  • contain:图像会完全显示,并且保持原图的宽高比。
  • cover:图像会完全占满元素容器,且宽或高与容器一致,并且保持原图的宽高比。
  • none:图像保持原图的尺寸。
  • scale-down:内容的尺寸与 none或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

image

<iframe height="300" style="width: 100%" scrolling="no" title="演示" src="https://codepen.io/3yya/embed/mdqajxr?default-tab=css%2Cresult&editable=true&theme-id=light" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>

图像位置

object-position 可以设置图像在元素容器中显示的位置,接收以下的值:

  • left、right、top、bottom、center
  • x、y 轴的坐标
/* 左下角 */
object-position: left bottom;
/* 水平居中、垂直居下 */
object-position: center bottom;
/* 水平居右、垂直居中 */
object-position: right center;
/* x 轴为 20px、垂直居中 */
object-position: 20px;
/* 水平居右、y 轴为 30px */
object-position: right 30px;
/* x 轴为剩余宽度的 10%、y 轴为剩余高度的 70% */
object-position: 10% 70%;
/* 距离底部 10px、距离右边 20px */
object-position: bottom 10px right 20px;