语法: 属性:1、src 指定要显示图像的URL2、width 宽度,指定图像的宽度 以px作为单位的数值,px可以省略3、height 高度,指定图像的高度 以px作为单位的数值,px可以省略4、onerror 分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就 是说图片 存在则显示 pic.gif,图片不存在将显示 noPic.gif。但问题来了,如果 noPic.gif 也不存在,则继续触 发 onerror,导致循 环,故出现错误。 说明:如果图片存在,但网络很不通畅,也可能触发 onerror。 解决:
function nofind(){
var img=event.srcElement;
img.src="images/logoError.png";
img.onerror=null; 控制不要一直跳动
}
注意: 1、如果 width 和 height 只设置了一个属性的话,那么另外一个属性会跟着"等比缩放" 2、src中的 URL ,要严格区分大小写(服务器端约束)
属性属性值描述srcURL图像的路径alt文本图像不能显示时的替换文本title文本鼠标悬停时显示的内容width像素设置图像的宽度height像素设置图像的高度border数字设置图像边框的宽度vspace像素设置图像顶部和底部的空白(垂直边距)hspace像素设置图像左侧和右侧的空白(水平边距)align
leftrighttopmiddlebottom
将图像对齐到左边将图像对齐到右边将图像的顶端和文本的第一行文字对齐,其他文字居图像下方将图像的水平中线和文本的第一行文字对齐,其他文字居图像下方将图像的底部和文本的第一行文字对齐,其他文字居图像下方onerror事件 ① 有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢?
② 可以借用img标签的onerror事件,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下:
③ 当图片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事件。
*解决方法:控制它不循环,代码如下:
function imgerrorfun(){
var img=event.srcElement;
img.src="images/logoError.png";
img.onerror=null; 控制不要一直跳动
}
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设置为默认值,关于 initialinherit从该元素的父元素继承属性。 关于 inherit