使img改变大小所占区不为原图大小
时间: 2023-08-31 22:05:14 浏览: 59
要使 `<img>` 元素的大小不占据原图大小的区域,你可以使用 CSS 来控制它的宽度和高度,以及设置 `object-fit` 属性来调整图片在 `<img>` 元素内的显示方式。
下面是一个示例:
HTML:
```html
<ul>
<li class="custom-li">
<img src="your-image.jpg" class="custom-image" alt="Your Image">
<span class="custom-text">Text</span>
</li>
</ul>
```
CSS:
```css
.custom-li {
display: flex;
align-items: center;
}
.custom-image {
width: 100px; /* 设置图片的宽度 */
height: 100px; /* 设置图片的高度 */
object-fit: cover; /* 调整图片在 <img> 内的显示方式,可以使用不同的值来满足需求,比如 contain、fill 等 */
}
.custom-text {
/* 设置文本的样式 */
}
```
在上述示例中,我们通过设置 `.custom-image` 类的宽度和高度属性来控制图片的大小。你可以根据需要调整这些值。
`object-fit` 属性用于定义图片在 `<img>` 元素内的显示方式。`cover` 值可以让图片填充整个元素,并保持其宽高比例,超出部分会被裁剪。你还可以尝试使用其他值,如 `contain` 或 `fill`,根据实际需求选择最适合的显示方式。
希望这能帮助到你!如果还有其他问题,请随时提问。