HTML如何设置图片宽度和高度？img的width和height属性怎么用？

设置图片尺寸可使用html的width和height属性或css样式；2. 推荐使用css因其支持响应式设计、便于统一维护；3. 优化图片需压缩、选合适格式、用webp、懒加载和cdn；4. 实现响应式可用srcset、picture元素和max-width: 100%；5. 尺寸单位除px外还可用%、em、rem、vw、vh，根据需求选择。

直接设置HTML图片的宽度和高度，可以通过

width

height

解决方案 HTML提供了两种主要方式来设置图片的宽度和高度：使用

<img>

width

height

1. 使用

<img>

width

height

这是最直接的方法。你只需要在

<img>

width

height

立即学习“前端免费学习笔记（深入）”；

<img src="image.jpg" width="500" height="300" alt="示例图片">

这种方法的优点是简单易懂，但需要注意的是，如果只设置了宽度或高度，浏览器会自动按比例缩放图片，这可能会导致图片失真。如果同时设置了宽度和高度，但比例与原始图片不一致，图片会被拉伸或压缩。

2. 使用CSS样式

可以使用内联样式、内部样式表或外部样式表来设置图片的宽度和高度。

• 内联样式：

<img src="image.jpg" style="width: 500px; height: 300px;" alt="示例图片">

• 内部样式表：

<style>
  img {
    width: 500px;
    height: 300px;
  }
</style>
<img src="image.jpg" alt="示例图片">

• 外部样式表：

在CSS文件中：

img {
  width: 500px;
  height: 300px;
}

在HTML文件中：

<link rel="stylesheet" href="style.css">
<img src="image.jpg" alt="示例图片">

使用CSS的优点是可以更灵活地控制图片的样式，例如可以使用百分比来设置宽度和高度，实现响应式布局。

img {
  width: 100%; /* 图片宽度占父元素宽度的100% */
  height: auto; /* 高度自动按比例缩放 */
}

height: auto

width: 100%

无限画

千库网旗下AI绘画创作平台

下载

object-fit

CSS的

object-fit

• contain

  : 保持图片宽高比，缩放图片以完全适应容器。可能会出现留白。

• cover

  : 保持图片宽高比，缩放图片以完全覆盖容器。图片可能会被裁剪。

• fill

  : 填充整个容器。图片可能会被拉伸或压缩。

• none

  : 不缩放图片。图片可能会超出容器。

• scale-down

  : 如果图片小于容器，则不缩放；否则，效果与

  contain

  相同。

img {
  width: 500px;
  height: 300px;
  object-fit: cover;
}

object-fit

为什么推荐使用CSS控制图片尺寸？

CSS的优势在于其样式和内容分离的特性。想象一下，你的网站有上百张图片，如果全部使用

width

height

<img>

图片太大导致加载缓慢怎么办？如何优化图片？

图片优化是前端性能优化的重要环节。大尺寸的图片会显著增加页面加载时间，影响用户体验。

• 压缩图片： 使用图片压缩工具（如TinyPNG、ImageOptim）可以减小图片的文件大小，而不会明显降低图片质量。
• 使用合适的图片格式： 对于照片，通常使用JPEG格式；对于颜色较少、需要透明度的图片，可以使用PNG格式；对于简单的图标，可以使用SVG格式。
• 使用WebP格式： WebP是一种由Google开发的现代图片格式，具有更高的压缩率和更好的图像质量。
• 懒加载： 使用懒加载技术，只在图片进入视口时才加载图片。可以使用

  loading="lazy"

  属性或第三方库实现懒加载。

<img src="image.jpg" loading="lazy" alt="示例图片">

• 使用CDN： 使用CDN可以将图片分发到全球各地的服务器上，用户可以从离自己最近的服务器上加载图片，提高加载速度。

如何让图片自适应不同的屏幕尺寸？

响应式图片是现代Web开发的重要组成部分。可以使用以下技术实现响应式图片：

• 使用

  srcset

  属性：

  srcset

  属性允许你为不同的屏幕尺寸提供不同的图片。浏览器会根据屏幕尺寸和像素密度选择最合适的图片。

<img src="image-small.jpg"
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     alt="示例图片">

• 使用

  <picture>

  元素：

  <picture>

  元素允许你为不同的媒体查询提供不同的图片。

<picture>
  <source media="(max-width: 480px)" srcset="image-small.jpg">
  <source media="(max-width: 800px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="示例图片">
</picture>

• 使用CSS的

  max-width

  属性： 可以使用CSS的

  max-width

  属性来限制图片的最大宽度，使其不会超出容器的范围。

img {
  max-width: 100%;
  height: auto;
}

这些技术可以帮助你创建响应式图片，使其在不同的设备上都能呈现最佳效果。

width

和

height

属性的单位除了像素，还可以用什么？

除了像素（px），

width

height

• 百分比（%）： 相对于父元素的宽度或高度。
• em： 相对于当前元素的字体大小。
• rem： 相对于根元素的字体大小。
• vw： 相对于视口宽度的1%。
• vh： 相对于视口高度的1%。

使用百分比可以创建响应式布局，而使用

em

rem

vw

vh

<img src="image.jpg" width="50%" height="auto" alt="示例图片">

img {
  width: 10em;
  height: 5em;
}

选择合适的单位取决于你的具体需求。通常情况下，像素和百分比是最常用的单位。