怎么调整插入图片的大小
时间: 2023-08-21 18:02:52 浏览: 260
要调整插入图片的大小,可以使用 CSS 中的 `width` 和 `height` 属性来设置图片的宽度和高度。以下是两种常用的方法:
1. 使用固定的宽度和高度
```html
<img src="image.jpg" alt="图片" width="200" height="150">
```
这个示例代码会插入一张宽度为 200 像素,高度为 150 像素的图片。
2. 使用相对的宽度和高度
```html
<style>
.img-wrapper {
width: 50%;
height: auto;
}
.img-wrapper img {
max-width: 100%;
height: auto;
}
</style>
<div class="img-wrapper">
<img src="image.jpg" alt="图片">
</div>
```
这个示例代码会将图片包裹在一个具有宽度为父元素宽度的 50% 的 div 容器中,然后使用 CSS 中的 `max-width` 和 `height` 属性来实现图片的自适应大小。其中 `max-width` 属性设置图片的最大宽度为 100%,这样图片的宽度就会根据容器的大小自动调整,而 `height` 属性则设置图片的高度为 auto,这样图片的高度也会自动调整,以保持原始宽高比例。
需要注意的是,对于使用相对宽度和高度的方法,为了保持图片的原始宽高比例,最好只设置其中一个属性,另一个属性设置为 auto。
阅读全文