问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

外 div 宽度随窗口，内 div 固定宽高并且是内联，内 div 内的图片如何水平和垂直居中？

头像
shendaowu_v2
    601039

    说得比较抽象，就是以这里的 grid example 为基础：https://sortablejs.github.io/Sortable/#grid 。如果图片的宽大于高，则上下的空白等同。如果图片的宽小于高，则左右的空白等同。图片的宽高不确定。
    用谷歌和 AI 花了很长时间，一直没解决。

    前端css
    阅读 1.7k
    1 个回答
    得票最新
    头像头饰
    Seven
      3.1k2411
      <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.css">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .grid-item {
            position: relative;
            border: 2px solid #ccc;
            padding-top: 100%; /* 默认填充比例 */
        }
        .grid-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <div class="grid-container" id="sortable">
        <div class="grid-item"><img src="image1.jpg" alt="Image 1"></div>
        <div class="grid-item"><img src="image2.jpg" alt="Image 2"></div>
        <div class="grid-item"><img src="image3.jpg" alt="Image 3"></div>
        <!-- 其他图片项 -->
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
    <script>
        // 初始化Sortable
        new Sortable(document.getElementById('sortable'), {
            grid: [20, 20], // 可选，设置拖拽的网格间距
        });

        // 获取图片元素并动态设置空白
        document.querySelectorAll('.grid-item img').forEach(img => {
            img.onload = () => {
                const width = img.naturalWidth;
                const height = img.naturalHeight;
                const item = img.closest('.grid-item');

                if (width > height) {
                    item.style.paddingTop = `${(height / width) * 100}%`; // 宽大于高时调整上下空白
                } else {
                    item.style.paddingTop = '100%'; // 宽小于高时，默认填充上下比例
                }
            }
        });
    </script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题