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 确保图片按比例缩放,以适应容器的高度和宽度,同时保持图片的完整性(不拉伸、不压缩、不裁剪)。

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

相关推荐
前端(从入门到入土)2 分钟前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗29 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
AA-代码批发V哥35 分钟前
CSS之布局详解指南
css
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
musk12122 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼3 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js