css 设置<img>适应指定宽高,保持原始比例展示
2025-04-26 22:55
互联网
SQL Server
Oracle
MySQL
PostgreSQL
NoSQL
大数据
其他数据库
Windows
Windows Server
Linux
macOS
嵌入式
APACHE
NGINX
redis
Docker
git
互联网
tomcat
Html/Css
JavaScript
jQuery
HTML5
Angular
React
Vue
小程序
架构设计
面向对象
设计模式
领域驱动设计
Android开发
iOS开发
Flutter
鸿蒙
其他手机开发
敏捷开发
项目与团队管理
软件工程其他
.NET
Java
Python
Go
PHP
C++
Ruby
Swift
C语言
Erlang
Delphi
Scala
R语言
Verilog
Dart
Rust
其他语言
asp
nodejs
读书区
翻译区
求职面试
计算机图形学
软件测试
菜谱
SEO技术
摄影
生活技巧
136
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.008280s,M:286.58 KB
返回顶部
留言
留言
评论