前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >style="width: ___" 与 width="___"

style="width: ___" 与 width="___"

作者头像
用户7043603
发布2022-02-27 00:05:32
1.6K0
发布2022-02-27 00:05:32
举报

有两种方法可以定义图片的尺寸:

  • 使用 heightwidth 属性:
代码语言:javascript
复制
<img height="100" />
  • 或者在 CSS 样式中使用 heightwidth 属性:
代码语言:javascript
复制
<img style="height: 100px" />

区别

CSS widthheight 属性可用于所有 HTML 元素。但 HTML widthheight 属性仅适用于某些元素,如 canvasimgtabletd 等。

代码语言:javascript
复制
<!-- 工作 -->
<img width="200px" />

<!-- 不起作用 -->
<div width="200px"></div>

对于 canvas 元素,它们不会产生相同的结果。

根据 HTML 规范,如果缺少 widthheight 属性,canvas 将使用默认值。

width 属性默认为 300,height 属性默认为 150。

建议直接或通过 JavaScript 设置 canvasheightwidth 属性,以避免 canvas 拉伸的问题。

代码语言:javascript
复制
<!-- 工作 -->
<canvas height="100" width="100">
  <!-- 不起作用 -->
  <canvas style="height: 100px; width: 100px;"></canvas>
</canvas>

canvaswidthheight 属性必须是不带单位的正数。width="100px" 将不起作用,尽管它似乎是其他元素的有效属性声明。

CSS 样式属性的优先级高于 HTML 属性。

在以下示例中,height: 200px 属性将覆盖 height="100px" 属性:

代码语言:javascript
复制
<!-- 图像的宽度为 200px -->
<img height="100px" style="height: 200px" />

widthheight 属性还广泛用于电子邮件中,我们必须支持多种屏幕大小(移动、桌面)和各种电子邮件客户端。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 区别
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档