语法：<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

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>


left

right

top

middle

bottom

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