css图片宽高自适应盒子（宽＞高就限制宽，高＞宽就限制高）
2025-06-23 23:52
Html/Css
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技术
摄影
生活技巧
5
0
0
0
标题录入
封面图
在 CSS 中实现图片的宽高自适应，并且根据图片的宽高比例来限制宽度或高度，可以通过以下方法实现。通常情况下，我们希望图片保持其原始的宽高比例，并根据容器的大小进行缩放。 假设你有一个包含图片的容器，可以使用以下代码： ### HTML: ```html <div class="image-container"> <img src="your-image.jpg" alt="Responsive Image"> </div> ``` ### CSS: ```css .image-container { width: 100%; /* 容器宽度可以自适应 */ height: auto; /* 容器高度会根据宽度和图片比例自动调整 */ max-width: 100%; /* 确保容器不会超出父元素 */ } .image-container img { width: 100%; /* 图片宽度填充容器 */ height: auto; /* 图片高度根据宽度比例自动调整 */ } ``` ### 解释： 1. **`.image-container`**: - `width: 100%`: 容器的宽度会根据父元素的宽度自动调整。 - `height: auto`: 容器的高度会根据宽度和图片的比例自动调整。 - `max-width: 100%`: 确保容器不会超出父元素的宽度。 2. **`.image-container img`**: - `width: 100%`: 图片的宽度会填充容器的宽度。 - `height: auto`: 图片的高度会根据宽度的比例自动调整，从而保持图片的宽高比。 ### 结果： - 如果图片的宽度大于高度，图片会以宽度为限制，高度按比例缩小。 - 如果图片的高度大于宽度，图片会以高度为限制，宽度按比例缩小。 这样就可以实现图片的宽高自适应，并且根据图片的宽高比例来限制宽度或高度。
上一篇：
css文字两行或者几行显示省略号
标题录入，一次不能超过6条
墨菲定律
T:0.004972s,M:154.2 KB
返回顶部
留言
留言
评论