原生HTML：img 相关属性详解（alt属性,onerror事件，以及其他基本属性）,css中的object-fit

语法：<img>
属性：
1、src
   指定要显示图像的URL
2、width
   宽度，指定图像的宽度
   以px作为单位的数值，px可以省略
3、height
   高度，指定图像的高度
   以px作为单位的数值，px可以省略
4、onerror
   分析：特别注意 onerror，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就 是说图片                存在则显示 pic.gif，图片不存在将显示 noPic.gif。但问题来了，如果 noPic.gif 也不存在，则继续触 发 onerror，导致循                环，故出现错误。
   说明：如果图片存在，但网络很不通畅，也可能触发 onerror。                      
   解决：

<script type="text/javascript"> 	
	function nofind(){ 
		var img=event.srcElement; 
		img.src="images/logoError.png"; 
		img.onerror=null; 控制不要一直跳动 
	} 
</script> 
<img src="images/logo.png" onerror="nofind();" />

    注意：
                1、如果 width 和 height 只设置了一个属性的话，那么另外一个属性会跟着"等比缩放"
                2、src中的 URL ，要严格区分大小写(服务器端约束)

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字	设置图像边框的宽度
vspace	像素	设置图像顶部和底部的空白（垂直边距）
hspace	像素	设置图像左侧和右侧的空白（水平边距）
align	left right top middle bottom	将图像对齐到左边 将图像对齐到右边 将图像的顶端和文本的第一行文字对齐，其他文字居图像下方 将图像的水平中线和文本的第一行文字对齐，其他文字居图像下方 将图像的底部和文本的第一行文字对齐，其他文字居图像下方
onerror	事件	①    有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，这样让人很不爽，如何变得美观些呢？ ②　可以借用img标签的onerror事件，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下：　 <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';"> ③　当图片images/logo.png不存在时，将触发 onerror事件，而 onerror 中又为该 img 指定了images/logoError.png图片。也就是说图片images/logo.png存在则显示logo.png，图片images/logo.png不存在将显示 logoError.png。 　　*问题：如果images/logoError.png 也不存在，则会继续触发 onerror事件，导致死循环，故会出现打开网页时提示 Stack overflow at line: 0 错误。特别说明：如果图片存在，但网络很不通畅，也可能触发 onerror事件。 　　*解决方法：控制它不循环，代码如下：    <img src="images/logo.png" onerror="imgerrorfun();" /> <script type="text/javascript"> function imgerrorfun(){ var img=event.srcElement; img.src="images/logoError.png"; img.onerror=null; 控制不要一直跳动 } </script>

css中的object-fit 

CSS object-fit 属性 | 菜鸟教程

语法

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

属性值

值	描述
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain	保持原有尺寸比例。内容被缩放。
cover	保持原有尺寸比例。但部分内容可能被剪切。
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial	设置为默认值，关于 initial
inherit	从该元素的父元素继承属性。 关于 inherit