如何使用HTML设置图片的高度和宽度

下载PDF文件
下载PDF文件

本指南介绍如何在HTML（超文本标记语言）中设置图片的高度和宽度。

  • 宽度属性指定图片的宽度，单位是像素。
  • 高度属性指定图片的高度，单位是像素。
  • 在HTML 4.01中，可以用像素或包含元素的百分比来定义高度。在HTML5中，只能用像素来定义高度。

步骤

下载PDF文件
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6c\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    比如，default.html。
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    • <img src="imagefile.jpg" alt="Image" height="42" width="42">
    • src 是图片的文件路径。
    • alt 是图片的标记。
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2c\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    比如， height="19" width="20"。
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    所有主流浏览器都支持宽度属性，比如Google Chrome、Safari、Mozilla Firefox、Opera、Internet Explorer等。
    广告

小提示

  • 一定要指定图片的高度和宽度。指定后，页面在加载时就可以为图片预留空间。如果没有这些属性，浏览器就不知道图片的大小，也就无法预留空间，从而导致页面布局在加载图片时发生变化。
  • 如果缩小大图片的高度和宽度，虽然在页面上看起来很小，但用户仍需要加载原图。为避免这种情况，先用工具缩小图片，然后再放到网页上。
广告

你可能还喜欢

如何
向Illustrator中添加字体
如何
登录Twitter
如何
下载YouTube视频
如何
从网站上免费下载视频
如何
保存Instagram上的图片
如何
更改YouTube语言设置
查看Instagram而不注册账号
如何
使用VPN
如何
从SIM卡中获取你的手机号码
如何
打开EPUB文件
如何
绕过YouTube的年龄限制
如何恢复被冻结的Twitter账号
如何
关闭YouTube限制模式
如何在Instagram上隐藏你关注了哪些人
广告

参考

  1. http://www.w3schools.com/ —— 此网站提供HTML的所有教程。

关于本wikiHow

其他语言
本页面已经被访问过10,063次。

这篇文章对你有帮助吗？

广告