css 设置<img>适应指定宽高,保持原始比例展示
2025-04-26 22:55
互联网
128
0
0
0
标题录入
封面图
在 CSS 中,可以通过设置 `max-width` 和 `max-height` 属性来让 `<img>` 元素适应指定的宽高,并且保持原始的比例。同时,使用 `object-fit` 属性可以控制图片如何填充容器。 以下是一个示例代码: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Scaling</title> <style> .image-container { width: 300px; /* 指定容器宽度 */ height: 200px; /* 指定容器高度 */ overflow: hidden; /* 防止图片超出容器 */ } img { max-width: 100%; /* 图片最大宽度为容器宽度 */ max-height: 100%; /* 图片最大高度为容器高度 */ object-fit: contain; /* 保持图片原始比例 */ } </style> </head> <body> <div class="image-container"> <img src="your-image.jpg" alt="Example Image"> </div> </body> </html> ``` ### 解释: 1. **`.image-container`**:这是图片的容器,设置了固定的宽度和高度。 2. **`max-width: 100%` 和 `max-height: 100%`**:确保图片不会超过容器的宽度和高度。 3. **`object-fit: contain`**:保持图片的原始比例,图片会缩放以适应容器,但不会被裁剪。 ### 其他 `object-fit` 值: - `cover`:图片会缩放以覆盖整个容器,可能会裁剪部分图片。 - `fill`:图片会被拉伸以完全填满容器,不保持比例。 - `none`:图片大小不变,保持原始尺寸。 - `scale-down`:根据需要选择 `none` 或 `contain`。 通过这种方式,你可以轻松地让图片适应指定的宽高并保持原始比例。
上一篇:
docx, xlsx, pptx, csv 的MIME 类型是什么
下一篇:
http请求方法:GET、POST、PUT、PATCH、DELETE、OPTIONS、HEAD、TRACE
标题录入,一次不能超过6条
冥想是什么?怎么冥想?
T:0.006728s,M:245.38 KB
返回顶部
留言
留言
评论