HTML img标签

1.基本用法

<img src="kof5.jpg" alt="特瑞">

src属性为图片的链接地址，如果图片加载失败，代替图片的就是alt属性设置的文本

2.设置图片的宽高

• img标签默认的宽高就是原图的宽高
• 设置图片的宽高 （设置width属性，无需单位）

<img src="kof5.jpg" width="240" alt="特瑞">

还可以写成（设置样式）

<img src="kof5.jpg" style="width:240px;" alt="特瑞">

3.width属性与宽高的样式

• 样式优先级要高于width属性

<!-- 图片渲染的宽度为240px -->
<img src="kof5.jpg" style="width:240px;" width="120" alt="特瑞">

• width与css样式获取宽高的区别
  两者获取到的数值大小是一样的，只是一个有单位，一个没有

<script>
    window.onload=function(){
        var img = document.querySelector('img')
        var width = getComputedStyle(img, false).width
        console.log(width) // 240px
        console.log(img.width) // 240
    }
</script>

4.img图片出现下边距的问题

下面的代码，一行最多只能放2张图片。所以 第3，4张会自动放到下一行，不过两行之间会出现一条边距

<div style="width: 490px;border:1px solid blue;margin: 0 auto;">
    <img src="kof5.jpg" width=240 alt="特瑞">
    <img src="kof5.jpg" width=240 alt="特瑞">
    <img src="kof5.jpg" width=240 alt="特瑞">
    <img src="kof5.jpg" width=240 alt="特瑞">
</div>

图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的，即vertical-align，他的默认值为baseline，将图片的垂直对齐方式设置为 top 或 bottom就可以解决 这个问题

<div style="width: 490px;border:1px solid blue;margin: 0 auto;">
    <img src="kof5.jpg" width=240 style="vertical-align: bottom" alt="特瑞">
    <img src="kof5.jpg" width=240 style="vertical-align: bottom" alt="特瑞">
    <img src="kof5.jpg" width=240 style="vertical-align: bottom" alt="特瑞">
    <img src="kof5.jpg" width=240 style="vertical-align: bottom" alt="特瑞">
</div>

解决办法二：而基线的位置是与字体相关的，也就是说字体越大，空隙越大。可以将字体大小设置为0

<div style="width: 490px;font-size:0px;">
    <img src="kof5.jpg" width=240 alt="特瑞">
    <img src="kof5.jpg" width=240 alt="特瑞">
    <img src="kof5.jpg" width=240 alt="特瑞">
    <img src="kof5.jpg" width=240 alt="特瑞">
</div>

解决办法三：将img标签设置为块级元素（这个例子下可能让img独占一行）
解决办法四:为img设置浮动

5.图片加载失败时img元素的大小

img默认是行内元素，行内元素的大小由内容撑开，如果图片加载失败，撑开img元素的就只能是alt属性对应的文本值
但是如果将img设置为块级元素，块级元素可以设置自己的宽高，这样即使图片加载失败，也不影响img元素的大小

HTML img标签

原文：https://www.cnblogs.com/OrochiZ-/p/11565268.html