如何使用HTML调整图像大小

以下步骤指导希望将图像保持其原始文件大小(以KB或MB为单位)并使用HTML(超文本标记语言)更改图像的显示大小的用户 。尽管这是可能的,但我们仍然建议您使用图像编辑器调整图像大小,以减小文件大小并减少图像的下载时间 。

    • 我可以使用什么程序来查看、编辑或创建图像?
当使用以下步骤更改图像的大小时,它仍然需要加载较大的图像,即使它在浏览器中显示较小 。
使用 HTML 调整大小在“img src” HTML标记中指定宽度和高度,如下例所示 。
<img src="http://img.shenmazhishi.com/231005/10525551S-0.jpg" width="200" height="40" alt="计算机希望">图像如何正常显示使用上面的代码调整图像大小笔记调整图像大小时,需要保持纵横比 。否则,图像可能会扭曲并损失一些图像质量 。
使用 CSS 调整大小您还可以通过CSS (级联样式表)调整图像大小,如下例所示 。
img. 调整大小 {宽度:200px;高度:40px;}img. 调整大小 {最大宽度:50%;最大高度:50%;}在第一个示例中,为宽度和高度指定了实际大小(以像素为单位) 。使用此选项会限制使用该 CSS 的图像 。由于它指定了宽度和高度,因此如果纵横比不是 5:1,此方法可能会导致图像扭曲 。
第二个示例指定原始图像大小(宽度和高度)的百分比,而不是以像素为单位的大小 。由于指定了图像宽度和高度的百分比,因此浏览器可以调整几乎任何图像的大小并保持其纵横比 。
要将 CSS 应用到“img src”HTML 标记,您需要执行以下操作 。
<img class="resize" src="http://img.shenmazhishi.com/231005/10525551S-0.jpg" alt="Computer Hope 徽标小">【如何使用HTML调整图像大小】使用 CSS 会导致更短的 img 标签,因为您只需在标签中指定类名即可激活该图像的 CSS 代码 。