<div class="cooperation_people">
<span>
<img src="./static/imgs/pages/coo/cooperation_4.png" alt="" srcset="">
</span>
</div>
</div>
.cooperation_one{
width: 30%
height: 100px // 保证所有的图片高度固定
line-height: 100px //垂直居中
display: flex //弹性布局保证左右居中
justify-content: space-around
}
.cooperation_people{
display: table-cell //保证每行的高度是一样的
text-align: center
vertical-align:middle
}
.cooperation_people span{
display: block
width: 100%
margin: 0 auto
}
.cooperation_people img{
max-width: 100%
max-height: 100%
}
操作如下:图像文件和http、html文件位于同一文件夹:只需输入图像文件的名称即可展示。
图像文件位于http、html文件的下一级文件夹:输入文件夹名和文件名,之间用“/”隔开,点击即可展示。
图像文件位于http、html文件的上一级文件夹:在文件名之前加入“../” ,如果是上两级,则需要使用 “../ ../”,以此类推,点击即可展示。
http,html指的是路径,当我们需要在网页中插入图像等外部文件,此时就需要采用“路径”的方式来指定文件的位置。
1、html插入图片要用到img标签。具体的用法,首先新建一个html文件,写入基本的html结构,导入一张gif格式的图片:
2、接着给img标签一个class属性,命名为img,在head标签中设置style标签,在style标签设置“.img”的属性,这里设置图片的长度和高度,并且设置图片的对齐方式为中心对齐,最后按下crtl+S键保存文件:
3、打开浏览器,可以看到网页中的gif图片的内容。以上就是使用html标签显示gif图片的方法: