图像的尺寸

通过 width 与 height 属性可以设置图像的尺寸，图像元素的实际尺寸计算方法如下：

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

图像适应模式

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

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

<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;

应用场景

一般 cover 、 fill 、 contian 用得比较多，他们的适用场景如下：

cover：不在乎图片是否被裁剪，要求图片的宽高比不能被改变。比如背景图、头像等等。
fill：要求图片能完整显示，不在乎图片的宽高比是否被改变。比如合同图片、发票图片等，这类关键的文件不能被裁剪。
contain：要求能完整显示，同时宽高比不能被改变。比如摄影作品、展览作品之类。

练习

将下面这张图片显示为头像吧，宽高设置为 100 像素。

用户上传了一份公告，用宽 300 像素，高 500 像素显示出来。