在HTML中，我们可以使用<img>标签来插入图片，要设置图片的大小，我们需要使用CSS样式，本文将详细介绍如何使用HTML和CSS设置插入图片的大小。
使用内联样式设置图片大小
1、在<img>标签中添加style属性，然后设置宽度(width)和高度(height)属性。
<img src="example.jpg" style="width: 200px; height: 300px;">2、代码解释：
src属性表示图片的来源。
style属性用于设置图片的样式。
width和height属性分别表示图片的宽度和高度。
使用CSS类设置图片大小
1、在<head>标签中添加一个<style>标签，然后定义一个CSS类，如下所示：
<style>
.image-size {
width: 200px;
height: 300px;
}
</style>2、在<img>标签中添加class属性，并设置为刚刚定义的CSS类。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片大小</title>
<link rel="stylesheet" href="image-size.css">
</head>
<body>
<!-HTML代码 -->
</body>
</html>3、在HTML文件的<img>标签中添加class属性，并设置为刚刚定义的CSS类。
<img src="example.jpg" class="image-size">代码解释：与上面的方法相同，这里不再赘述。
相关问题与解答
1、如何调整图片的纵横比？
答：可以在CSS类中设置object-fit属性为cover或contain,以保持图片的纵横比。
.image-size {
width: 200px;
height: 300px;
object-fit: cover; /* 或者使用 contain */
}
版权声明：本文内容来源于网络或网友投稿，如侵犯你的权益，请右侧小窗口联系我们删除。
THE END
