使用百分比作为 img 元素的宽度和高度属性会产生什么后果?

2024-05-07

我正在寻找某种方法来定位img元素在HTML从 w3schools.com 注意到这句话的页​​面(它讲的是设置width in an img元素):

在 HTML 4.01 中,宽度可以以像素或包含元素的百分比来定义。在 HTML5 中,该值必须以像素为单位。

它说宽度属性must以像素而不是百分比设置。但使用百分比时解决我的问题要容易得多。我使用了百分比并在最新版本的 Firefox、Chrome 和 IE 中检查了结果。一切都很好。

当百分比实际上工作正常时(尽管有 W3Schools 的指令),使用百分比会产生什么不良后果?


在 HTML 中而不是在 CSS 中给出图像尺寸的主要原因是,当浏览器等待图像加载时,用户代理(浏览器)可以在页面中为图像留出适当的空间。如果图像大小未设置,则图像下载后浏览器将必须重新渲染页面,并对页面上的每个后续图像再次执行相同的操作。

WHATWG HTML5 文档在以下部分中说明了以下内容:表示标记 https://html.spec.whatwg.org/#presentational-markup:

由于这些原因,在此版本中已从 HTML 中删除了表示性标记。这种变化并不令人意外。 HTML4 多年前就废弃了表现性标记,并提供了一种模式(HTML4 Transitional)来帮助作者摆脱表现性标记;后来,XHTML 1.1 更进一步,完全废弃了这些功能。

我假设由于百分比值与包含图像的元素相关,因此它们被认为是演示性的,而像素尺寸是绝对的,并且不会因平台、用户代理或视口而异。

与许多 HTML 属性和特性一样,您可以使用无效、过时或不推荐的语法,浏览器仍将呈现您的页面。这部分是因为它们通常是向后兼容的——即当语法有效时,它们可以呈现用早期版本的标记语言编写的 HTML 文档。

您应该使用无效语法吗?好吧,你可以这样做,但它也有缺点:不可预测的浏览器渲染无效元素、浏览器性能差、跨浏览器兼容性问题、潜在的安全问题等等。我们还知道,有一些 HTML 学究们会像看狗吐出来的东西一样查看您的语法。最终,如果你能以正确的方式做某事——在 CSS 中指定百分比宽度,而不是在 HTML 中——我认为仅仅因为你尝试过的浏览器仍然会呈现而做错事没有任何意义这一页。

图像的宽度和高度可以在 CSS 中使用各种不同的单位指定 - 像素、ems、rems、百分比、厘米、英寸等 - 请参阅CSS 测量单位 @ w3.org https://www.w3.org/Style/Examples/007/units.en.html.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用百分比作为 img 元素的宽度和高度属性会产生什么后果? 的相关文章

  • 如何使用XPath选择非空段落?

    我想要抓取的网页具有类似的结构 每个都有一个段落是一个问题 一个段落是一个答案 我想抓取每个问题和答案并将它们存储在两个项目中 问题是 在某些页面上 问题和答案分别是 xxx p 1 and xxx p 2 但在其他页面上 xxx p 1
  • 电子邮件链接在 Android 上不起作用

    我有 HTML 格式的点击电子邮件链接的代码 它在我的电脑上运行良好 但在移动设备上不起作用 我只有 Android 所以我不知道问题是否仅在 Android 上或所有移动设备上 当我按下链接时 浏览器显示 网页无法显示 邮寄至 电子邮件受
  • 重新加载更新的 javascript> 代码而不完全重新加载 html 页面

    我正在开发一个单页 Web 应用程序 它具有许多不同的功能和形式 当开发一个深度 我的意思是主页上没有的 功能时 我会经历这个循环 开发代码 编辑类和函数 刷新整个页面 一路点击 直到到达我需要测试的部分 有时加起来大约一分钟 测试新代码
  • html5 canvas 上的错误显示 lineWidth=1

    I have example https developer mozilla org samples canvas tutorial 4 5 canvas linewidth html https developer mozilla org
  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her
  • div 中的文本字符有限,添加“阅读更多”链接并在单击链接时显示所有字符

    我有一个 div 里面有文本 使用 PHP 和 MySQL 显示 结构如下 div class description p Here is a lot of text p div 我想在 p 标签内的文本超过 100 个字符时显示 阅读更多
  • CSS3变换:悬停时翻译,带有过渡[重复]

    这个问题在这里已经有答案了 这应该很简单 我的 HTML 中有一堆锚点 如下所示 a href Link 1 a a href Link 2 a a href Link 3 a a href Link 4 a a href Link 5 a
  • 如何将 div 与其父级的顶部对齐,但保持其内联块行为?

    See http jsfiddle net b2BpB 1 http jsfiddle net b2BpB 1 问 如何让box1和box3对齐到父div的顶部boxContainer boxContainerContainer backg
  • 将 JSON 发布到 Python CGI

    我已经安装了 Apache2 并且 Python 可以工作 但我有一个问题 我有两页 一个是 Python 页面 另一个是带有 JQuery 的 Html 页面 有人可以告诉我如何让我的 ajax 帖子正常工作吗
  • 在按钮之间添加空间?

    嗨 我这里有一个代码 除了一件事之外 一切都很完美 代码中每个按钮之间没有空格 我尝试过 margin 但不幸的是它是一个无序列表 所以我有点困惑 我将添加或替换什么以在两个按钮之间留出空间 帮助
  • HTML5 支持命名空间吗?

    我们是否可以使用新标签来扩展 HTML5 例如
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 如何使用 JavaScript 获取元素的填充值?

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l
  • Android中webview的截图方法

    我在 webview 中的 html5 canvas 上画了一些线 并尝试使用下面的代码截取 webview 的屏幕截图 WebView webView WebView findViewById R id webview webView s
  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航

随机推荐

  • 为什么 .Net 词典中的条目是按加法顺序排列的?

    我刚刚看到这种行为 我对此感到有点惊讶 如果我向字典中添加 3 或 4 个元素 然后执行 For Each 来获取所有键 它们将以我添加的顺序出现 这让我感到惊讶的原因是字典内部应该是一个哈希表 所以我希望事情能以任何顺序出现 按键的哈希排
  • 熊猫 Between_time 布尔值

    我正在尝试创建一个列 如果行值落在时间 09 00 和 17 00 之间 该列将分配 true 我可以使用轻松选择这些时间between time但无法分配新列 aTrue False df df between time 9 00 17
  • 如何在 iPhone 上实现炫酷的警报/信息叠加?

    我了解如何在我的 iPhone 应用程序中包含标准警报 并且可以使用 确定 或 关闭 按钮将其关闭 请参阅图中的示例 如何制作一个很酷的警报 通知覆盖层 就像 foursquare 应用程序中看到的那样 请参阅图片中的 foursquare
  • 在未排序的整数列表中最优搜索 k 个最小值

    我刚刚接受采访时提出了一个问题 我很好奇答案应该是什么 问题本质上是 假设您有一个包含 n 个整数的未排序列表 您如何找到此列表中的 k 个最小值 也就是说 如果您有一个 10 11 24 12 13 列表并且正在寻找 2 个最小值 您将得
  • 访问注释中的属性值

    我想访问注释中的属性值 作为属性的值 对于前 在我的属性文件中 我有一个条目表达式 3 10 在我的 Scheduler 类中 我使用注释 Scheduled cron VALUE 我想从表达式键对应的属性文件中读取这个值 尝试这样做 Va
  • 将 h1 元素的内容复制到剪贴板?

    所以 我做了一个翻译器 但效果不是很好 但无论如何 它正在工作 我想尝试添加一些可以复制结果的内容 有没有办法做到这一点 以下是我的代码 提前致谢 我知道有一种方法可以通过输入来完成此操作 但我不确定是否可以通过标题来完成 var myTe
  • 将表单作为本地表单传递给 Rails 5 中渲染的部分 ajax

    我已经查遍了 找不到有效的解决方案 相关控制器 profits controller rb def new tabs market Market order mjsnumber all first profit Profit new pro
  • 如何使用aaply并保留数组中的维度顺序?

    我有一个 3 维数组 我想将函数应用于第三维并返回一个数组 我很高兴 plyr aaply 几乎能满足我的要求 但是它会交换我的数组的尺寸 文档告诉我它是幂等的 这 在我查找之后 让我认为结构应该保持不变 这是一个带有恒等函数的可重现示例
  • Jenkins 多分支管道 - 在分支中配置属性?

    我们已经使用 Jenkins 多分支管道插件成功设置了构建管道 该插件在大多数情况下都运行良好 但是我们遇到了一个困扰我们的问题 Jenkinsfile包含一组属性 这些属性也显示在 UI 中 但如何为各个分支设置默认值 这就是我们的属性定
  • 如何使用 Haskell 中的 thyme 库从 Int 值创建 UTCTime?

    我有年 月 日 小时和分钟值 所有这些都是类型Int 我怎样才能将它们转换为UTCTime or UniversalTime 需要导入以下内容 import Control Lens import Data Thyme Clock impo
  • 错误:(52, 0) 未找到 Gradle DSL 方法:使用 Quickblox API 中的“сompile()”

    我尝试通过添加在线 Maven 依赖项在我的程序中使用 Quickblox API 我正在使用 Android Studio 当我尝试构建我的程序时 它显示以下错误 Error 52 0 Gradle DSL method not foun
  • .NET 声明式安全性:为什么 SecurityAction.Deny 无法使用?

    我已经搞乱了大约一天半的时间 现在正在筛选 NET Reflector 和 MSDN 文档 但无法弄清楚任何事情 在 NET 框架中 您可以通过标记如下方法来要求当前的委托人属于一个能够执行方法的角色 PrincipalPermission
  • 未定义的变量:HTTP_RAW_POST_DATA

    当我对 HTTP RAW POST DATA 进行简单的回显时 出现错误 Undefined variable HTTP RAW POST DATA 我在 php ini 中读到我需要取消勾选 always populate raw pos
  • 从编码视频文件中提取运动向量

    我正在尝试从编码的 mp4 文件中提取运动矢量数据 在之前的帖子中我发现 一个答案http www princeton edu jiasic cos435 motion vector c http www princeton edu jia
  • 如何更新我的 docker 服务/堆栈使用的最新映像?

    In the yml定义 我总是拉latest我的服务形象 当我将新映像推送到注册表并且想要更新堆栈中的服务使用的映像时 我没有看到任何 pull标志和文档码头服务更新 https docs docker com engine refere
  • 多项式混合 Logit 模型 mlogit r-package

    我发现了mlogit package https cran r project org web packages mlogit index html对于多项 Logit 模型 寻找估计多项混合 Logit 模型 在阅读了精彩的小插图后 我发
  • MICE LoggedEvents 是什么意思?

    我正在尝试使用以下方法运行多重插补miceR 中的函数 来自同名包 我收到一条警告 表明事件已被记录 这是输出mice loggedEvents来自我的 MWE 见下文 it im dep meth out 1 1 X pmm H 我不确定
  • react-google-maps/api 避免在某些状态更改后重新渲染地图

    我遇到了问题 我的 GoogleMaps 实例会刷新并以某些方式自我居中onClick设置状态的函数 并且将发生整个组件渲染周期 经过一番谷歌搜索后 有人建议将组件实例化分开并重新使用 现在的问题是我有一些逻辑来在内部显示标记
  • 我仍然没有获得代表

    使用委托不是可以帮助处理一些异步情况吗 我尝试了以下操作 但我的用户界面仍然挂起 你到底什么时候使用代表 Public Class Form1 Private Delegate Sub testDelegate Private Sub Bu
  • 使用百分比作为 img 元素的宽度和高度属性会产生什么后果?

    我正在寻找某种方法来定位img元素在HTML从 w3schools com 注意到这句话的页 面 它讲的是设置width in an img元素 在 HTML 4 01 中 宽度可以以像素或包含元素的百分比来定义 在 HTML5 中 该值必