Question

我正试图找出一个非常具有挑战性的问题。我有一个网站的标题，将生成三个随机图片。图片的集合非常庞大，因此纵横比因图片而异。

Web的标题实际上是一个响应表，包含一行和三个表格单元格：

.header table {
                width: 94%;
                border: 0;
                background: transparent;
                margin-left: 5%;
                margin-right: 5%;
                vertical-align: middle;
                display: table;
}

现在我想做的是：

保持表格的响应性（即尽可能避免使用像素定义宽度和高度，而使用“％”）=＆gt;像这样：

.header td {
            display: table-cell;
            width: 25%;
            height: auto;
            text-align: center;
            vertical-align: middle;
    }

...但同时，将三张随机图片放入表格单元格而不改变表格单元格的大小或宽高比 ...这意味着一些图片将被裁剪。

我正在尝试使用css3属性包含：

    .header td {...

            background-repeat: no-repeat;
            background-size: contain;
    ...}

<table class="header">
<tr>
            <td class="header" style="background-image:url('img/random1.jpg')">
            </td>
            <td class="header" style="background-image:url('img/random2.jpg')">
            </td>
            <td class="header" style="background-image:url('img/random3.jpg')">
            </td>
</tr>
</table>

但是这个属性似乎不是td标签的朋友......

无论如何，我实际上并没有坚持“桌面”解决方案。有没有人有任何关于如何做的工作：

在“行”中制作三张图片
将它们装入不改变比例的框架

纯CSS解决方案更可取，但我想这可能是不可能的。

Answer 1

首先，你需要某种宽度和高度的关系，否则你就不会得到响应行为。

所以我做了一些肮脏的黑客^^

我在每个td中插入一个图像给我关系，然后我用不透明度0隐藏它（在ie8中不会工作）。现在，如果你想插入一些其他的contetn然后使用位置和单独的容器。

HTML：

 <table class="header">
    <tr>           
        <td class="header" style="background-image:url('img/1.jpg')">
            <img src="img/1.jpg" />
        </td>
        <td class="header" style="background-image:url('img/2.jpg')">
            <img src="img/1.jpg" />
        </td>
        <td class="header" style="background-image:url('img/3.jpg')">
            <img src="img/1.jpg" />
        </td>
    </tr>
</table>

然后我改变了你的CSS：

    table {
        width: 94%;
        border: 0;
        background: transparent;
        margin-left: 5%;
        margin-right: 5%;
        vertical-align: middle;
    }
    td {
            width: 25%;
            height: auto;
            text-align: center;
            vertical-align: middle; 
            background-repeat: no-repeat;            
            background-size: cover;
            overflow-x: hidden;
            display: inline-block;
    }

    td img {
        opacity: 0;
        width: 100%;
        height: auto;
    }

它看起来很奇怪，因为我使用表格布局，然后我覆盖表格显示行为（显示：内联块），但我错过了一些背景信息所以我决定使用精确的你的HTML。< / p>

您可以在此处看到结果JS Fiddle

如何使图像适合保持确切的大小

1 个答案: