Web 前端如何设置图片大小-小武站

这篇文章介绍了在 Web 前端中设置图片大小的多种方法，包括 HTML、CSS、JavaScr IPt 和响应式设计等。

1.
CSS 直接设置图片的宽度和高度：
- 使用 CSS 中的width 和height 属性来设置图片的大小。
css

复制
```
img {
  width: 300px;
  height: 200px;
}
```
2.
CSS 设置图片的最大宽度和最大高度：
- 使用max-width 和max-height 属性来设置图片的最大尺寸。
css

复制
```
img {
  max-width: 300px;
  max-height: 200px;
}
```
3.
HTML 设置图片的宽度和高度：
- 直接在 HTML 代码中设置图片的宽度和高度，但不推荐使用，因为可能会破坏图片的原始比例。
html

复制
```
<img src="image.jpg" width="300" height="200" alt="Image">
```
4.
使用 CSS 样式表：
- 将 CSS 样式单独存放在一个外部 CSS 文件中，并在 HTML 文件中引用该 CSS 文件。
html

复制
```
<link rel="stylesheet" type="text/css" href="styles.css">
```
css

复制
```
/* styles.css */
img {
  width: 200px;
  height: 150px;
}
```

使用 JavaScr IPt：

通过 JavaScr IPt 动态地设置图片的大小。

html

复制

<img src="image.jpg" id="my-image">

javascript

复制

var image = document.getElementById("my-image");
image.style.width = "200px";
image.style.height = "150px";

响应式设计：

使用 CSS 的@media 查询来根据不同的屏幕尺寸设置不同的图片大小。

css

复制

@media screen and (max-width: 768px) {
  .my-image {
    width: 100px;
    height: 75px;
  }
}
@media screen and (min-width: 768px) {
  .my-image {
    width: 200px;
    height: 150px;
  }
}