网页中图片img的尺寸问题

<img>是不可替换元素（标签）

很奇怪？

《CSS世界》作者张鑫旭大大提出了一个观点：替换元素和非替换元素之间只隔了一个src属性！
经过“千奇百怪”的验证，至少现在看来，它无疑是正确的。由于我们平时都会这样写：<img src="xxx">，所以我们难免陷入思维定式，认为<img>===图片。
But事实完全相反：去掉src的<img>其实就是一个和<span>类似的普通的内联标签，也就是变成了一个非替换元素。

Web开发的时候，有时为了提高加载性能以及节约带宽，首屏以下的图片就会通过滚动屏加载的方式异步进行。然后，这个即将被异步加载的图片为了布局稳健，体验良好，偶尔会使用一张透明的图片占位：
我们可以直接：

<img>

然后配合下面的CSS实现效果：

img{visibility: hidden;}
img[src]{visibility: visible;}

（注意：这里的<img>直接没有src属性！没有！而不是src=""，src=""在很多浏览器里依然会有请求——请求的是当前页面数据。当图片src缺省的时候，图片不会有任何请求，这是最高效的实现方式。）

Firefox很好地证实了这一点。
img{display:block; outline:1px solid;}
<img />
这段代码表现出的img宽度最终为100%自适应父容器可用宽度。其表现上和<span>无异

—— Firefox下img的weight和height设置不了（不起作用）。

另一个观点是：替换元素和非替换元素之间只隔了一个CSS content属性。

有一个技术是“基于伪元素的图片内容生成技术”，通俗的说就是：我们可以对<img>元素使用如 ::before 和 ::after 进行内容生成及样式构建，比如笔者曾经做过的“火绒安全”首页中轮播图的样式构建。

但这种方法有一个很重要的——兼容性问题 ——尤其是在Chrome和Firefox中
· 不能有src属性
· （Chrome中）不能用content属性生成图片
· （Chrome中）需有alt属性并有值

上面说了一堆，其实是为了引出下面内容：

正因为<img>无法轻易改动宽/高（笔者这里说的是这种方式：<img src="xxx" width="..." height="...">），故对图片的某些样式处理一直是“头疼之举”。

当然，如果有css，则以css设置为“准”（如下图）

CSS3中，<img>和其它一些替换元素的替换内容的适配方式可以通过 object-fit 属性修改！ —— <img>元素默认声明了 object-fit: fill;

1. 如果我们设置 object-fit: none; 则图片的尺寸就会完全不受控制——表现和非替换元素 ::before 生成的图类似的尺寸；
2. 如果设置 object-fit: contain; 则图片会保持比利 —— 尽可能利用HTML尺寸，但不超出；有点类似于 “background-size: contain;”，以及 微信小程序中“mode="axpectFill"”

甚至于说，它和background引入图片时的 background-size: cover;——等比例缩放（使背景铺满全屏）有异曲同工之妙。

伪类 & content使用Demo

在小米 / 京东某些地方（PC端），你鼠标移入图片上时，会下方出现一个半透明很色条目，其核心CSS代码如下：

img::after{
	content:attr(alt信息);
	position:absolute;
	bottom:0;
	width:100%;
	background-color:rgba(0,0,0,.5);
	transform:translateY(100%);
	transition:transform .5s;
}
img:hover::after{
	transform:translateY(0);
}