时间戳

首页 > 解决方案 > 使用表格将图像组合在一起时，如何修复 chrome 生成错误的高度

html - 使用表格将图像组合在一起时，如何修复 chrome 生成错误的高度

问题描述

这是我在这里的第一篇文章，如果我的格式很糟糕，请见谅。

尝试在 a 中将图像切片组合在一起以创建全尺寸图像的效果。FF 和 edge 都正确显示图像，但是尽管行中的所有图像具有相同的高度（它们确实具有不同的宽度），但 chrome 似乎正在生成不同的高度。只有在给表格设置宽度（并缩小图像尺寸以适合表格）时才会出现问题

在此处输入图像描述

在此处输入图像描述

我尝试将 .img 更改为 height:100% ，但这只会将高度更改为原始图像的全长，使其变形。我也试过在没有运气的情况下让身高达到 100%

请注意，图像片段每行都有不同的高度，每列都有不同的宽度，所以硬编码是不可能的

<style>
    tr,
    td,
    table,
    img,
    tbody {
        padding: 0;
    }

    table {
        border-spacing: 0;
        width: 300px;
    }

    img {
        display: block;
        width: 100%;
    }
</style>
</head>

<body>
    <table>
        <tr>
            <td><img src="https://i.imgur.com/OfAxJus.jpg"></td>
            <td><img src="https://i.imgur.com/N1bcNYU.jpg"></td>
            <td><img src="https://i.imgur.com/qCkFcIW.jpg"></td>
            <td><img src="https://i.imgur.com/xqBG6zQ.jpg"></td>
        </tr>

        <tr>
            <td><img src="https://i.imgur.com/bddCcSn.jpg"></td>
            <td><img src="https://i.imgur.com/7ySyHqq.jpg"></td>
            <td><img src="https://i.imgur.com/ulHRT4Q.jpg"></td>
            <td><img src="https://i.imgur.com/reU0Gyr.jpg"></td>
        </tr>

        <tr>
            <td><img src="https://i.imgur.com/rBsFVNI.jpg"></td>
            <td><img src="https://i.imgur.com/ikub1e4.jpg"></td>
            <td><img src="https://i.imgur.com/0RVlEWg.jpgg"></td>
            <td><img src="https://i.imgur.com/v22RK32.jpg"></td>
        </tr>

        <tr>
            <td><img src="https://i.imgur.com/1nLECe5.jpg"></td>
            <td><img src="https://i.imgur.com/R9hI0ka.jpg"></td>
            <td><img src="https://i.imgur.com/Bs8pQEY.jpg"></td>
            <td><img src="https://i.imgur.com/ndLkcTb.jpg"></td>
        </tr>
    </table>

我该怎么做才能使它不会产生不同的高度？

标签： htmlcss

解决方案

推荐阅读