CSSS 实现图片自适应容器展示

可以通过设置图片的 CSS 样式来实现让不同尺寸的图片在固定高度的容器中完整展示,不拉伸、不压缩、不裁剪。具体来说,可以使用 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 Fit Example</title>
    <style>
        .container {
            height: 300px; /* 固定高度 */
            width: 100%; /* 宽度可以根据需要调整 */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* 隐藏溢出部分 */
            border: 1px solid #ccc; /* 边框用于可视化容器 */
        }
        .image {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain; /* 保持图片比例,不拉伸或压缩 */
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="your-image-url.jpg" alt="Example Image" class="image">
    </div>
</body>
</html>

在这个示例中:

  1. HTML:

    • 一个包含图片的容器 <div class="container">
    • 图片元素 <img src="your-image-url.jpg" alt="Example Image" class="image">
  2. CSS:

    • .container 类定义了固定高度和宽度的容器,并使用 display: flex 来居中对齐内容。
    • .image 类设置了 max-height: 100%max-width: 100%,确保图片不会超出容器边界。
    • object-fit: contain 确保图片按比例缩放,以适应容器的高度和宽度,同时保持图片的完整性(不拉伸、不压缩、不裁剪)。

通过这种方式,无论图片的原始尺寸如何,它们都会在固定高度的容器中完整展示,并且不会被拉伸或压缩。

相关推荐
前端爆冲4 分钟前
项目中无用export的检测方案
前端
热爱编程的小曾32 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin44 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox