css - 如何将图像放入 以保持 的确切大小

Question

我正试图解决一个相当具有挑战性的问题。我有一个网站的标题，其中将生成三张随机图片。图片集非常庞大，因此纵横比因图片而异。

Web 的标题实际上是一个具有一行和三个表格单元格的响应式表格:

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

现在我想做的是:

1. 保持表格响应(即，如果可能，避免使用像素定义宽度和高度，而是使用“%”)=> 像这样:

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

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

我正在试验 css3 属性 contain:

    .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标签不是 friend ...

无论如何，我实际上并不是坚持“表格”解决方案。有没有人可以解决如何:

1. 让三张图片“一排”负责
2. 将它们放入不改变比例的框架中

?

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

Answer 1

首先，您需要某种宽度和高度关系，否则您将无法获得响应行为。

所以我做了一些肮脏的 hack ^^

我在每个 td 中插入一个给我关系的图像，然后我用不透明度 0 隐藏它(在 ie8 中不起作用)。现在，如果您想插入一些其他内容，请使用位置和单独的容器。

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;
    }

它看起来有点奇怪，因为我使用的是表格布局，然后我覆盖了表格显示行为(显示:内联 block )，但我缺少一些背景信息，所以我决定使用精确的 html。

在这里你可以看到结果JS Fiddle