HTML 图片大小

2025年3月17日 | 阅读 3 分钟

HTML 图像尺寸用于调整网页上的图像大小。图像尺寸使用带有数值的尺寸元素来固定宽度。图像通过 HTML 中的尺寸与浏览器连接。它根据网页屏幕变成响应式图像尺寸。我们可以看到以下关于网页上主要图像尺寸的要点。

0 到 710 像素的屏幕尺寸用于小图像尺寸。我们可以使用 120 像素的布局。
711 像素到 991 像素的屏幕尺寸用于微小图像。我们可以使用 193 像素的布局。
992 像素或更大的屏幕尺寸用于微小图像。我们可以使用 278 像素的布局。

语法

以下语法显示了不同尺寸的图像。

<img srcset = "image_name width_value(100w)," sizes = "120px,
123px,
120px">
</div>

示例

以下示例显示了不同尺寸的图像。我们可以放置具有最大和最小宽度尺寸的不同默认布局。

示例 1

以下示例显示了 HTML 中基本的图像尺寸。我们可以对主要图像尺寸使用默认值。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see images in the required size </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  400w," sizes="120px,
123px,
120px">
</div>
</body>
</html>

输出

输出图像显示了基本图像尺寸。

示例 2

以下示例显示了 HTML 中基本的图像尺寸。我们可以对图像使用不同宽度但尺寸一致的尺寸。

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the difference between the size of the image as per requirement </p>
<div class = "container">
<img srcset = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  550w," sizes="120px, 123px,120px">
<img srcset = "https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  850w," sizes="120px, 123px,120px">
</div>
</body>
</html>

输出

输出图像显示了基本图像尺寸。

示例 3

以下示例显示了 HTML 中图像尺寸的最大宽度。我们可以对图像使用不同宽度但尺寸一致的尺寸。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the maximum width of the image size as per requirement </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  750w," sizes="(max-width: 400px) 120px, (max-width: 410px) 123px, 120px">
</div>
</body>
</html>

输出

输出图像显示了最大宽度图像尺寸。

示例 4

以下示例显示了 HTML 中图像尺寸的最小宽度。我们可以对图像使用不同宽度但尺寸一致的尺寸。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the minimum width of the image size as per requirement </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f  750w," sizes="(min-width: 100px) 120px, (min-width: 110px) 123px, (min-width: 450px) 120px">
</div>
</body>
</html>

输出

输出图像显示了最小宽度图像尺寸。

示例 5

以下示例显示了 HTML 中图像尺寸的最大和最大宽度。我们可以对图像使用不同宽度但尺寸一致的尺寸。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content = "width=device-width, initial-scale=1">
<title> HTML IMAGE SIZE </title>
<style>
.container {
position: relative;
font-family: Arial;
width: 430px;
height: 450px;
}
</style>
</head>
<body>
<h2> HTML IMAGE SIZE </h2>
<p> We can see the maximum and minimum width of the image size as per requirement </p>
<div class = "container">
<img srcset="https://img.freepik.com/free-photo/cascade-boat-clean-china-natural-rural_1417-1356.jpg?w=1380&t=st=1698079554~exp=1698080154~hmac=c688a4b75fed79cebe2fe5b1dfba84f45095cdb5e444d347b40ea4d53eb9fd4f 750w," sizes="((min-width: 10em) and (max-width: 20em)) 3em,
((min-width: 30em) and (max-width: 40em)) 3em,
(min-width: 40em) 4em">
</div>
</body>
</html>

输出

输出图像显示了最大和最小宽度图像尺寸。

结论

图像尺寸对于 HTML 网页显示交互式和用户友好的功能至关重要。开发人员使用 HTML 标签根据功能设置图像，使其对用户具有吸引力。

下一主题HTML 内部链接

HTML 图片大小

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 图片大小

语法

示例

结论

相关帖子

HTML 制表符

HTML 中的元数据包含在哪一部分

HTML 颜色样式

使用 Shunting yard 算法在 HTML 中使用 JavaScript 创建计算器

HTML 文档的根元素是什么

HTML 图片按钮

如何将 Word 转换为 HTML

HTML 和 CSS 中的自动图片滑块

HTML 申请表

如何在 HTML 中突出显示文本

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器