HTML菜鸟入门8

最新推荐文章于 2024-07-21 17:58:14 发布

小笨要阳光

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量258

点赞数

分类专栏： html 文章标签： html img inline block

本文链接：https://blog.csdn.net/xiaobenyaoyangguang/article/details/77619566

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

inline-block img标签

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
</style>
</head>
<body>
<img src="1.png" alt="cat"/>
<img src="1.png" alt="cat"/>
</body>
</html>

运行结果显示：
这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
img{width:60px;}
</style>
</head>
<body>
<img src="1.png" alt="cat"/>
<img src="1.png" alt="cat"/>
</body>
</html>

运行结果显示：
这里写图片描述
结果分析：对于image图片如果只设定宽或高样式就会进行等比缩放

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
img{width:60px;height:100px;}
</style>
</head>
<body>
<img src="1.png" alt="cat"/>
<img src="1.png" alt="cat"/>
</body>
</html>

运行结果：
这里写图片描述
结果分析：img标签支持宽高属性

小笨要阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML菜鸟入门8

inline-block img标签<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>无标题文档</title><style></style></head><body><img src="1.png" alt="cat"/><img
复制链接

扫一扫

专栏目录