html - 如何创建与包含的图像大小相同的 div。两者都应该响应

Question

我正在创建一个必须响应的移动电子邮件模板(意味着没有 javascript)。

我想内联放置几张图片，这些图片会随着屏幕变窄而缩小。我通过使用 css table 和 table-cell 来做到这一点，并让图像缩放。到目前为止没问题。

然而，由于图像经常被电子邮件客户端阻止，我被要求创建一种灰色的占位符，在图像未加载时显示图像“替代文本”。我希望此占位符与包含的图像大小相同，并且也以更窄的宽度缩放。

我已经走得很远了，正如你在下面的 fiddle 中看到的那样:http://jsfiddle.net/ow7c5uLh/29/

HTML:

<div class="table">
    <div class="table-cell">
        <div class="placeholder">
            <img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
        </div>
    </div>
    <div class="table-cell">
        <div class="placeholder">
            <img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
        </div>
    </div>
    <div class="table-cell">
        <div class="placeholder">
            <img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
        </div>
    </div>
</div>

CSS:

.table {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-cell {
    display: table-cell;
    text-align: center;
    padding: 0 5px;
    border: 1px dotted black;
}

.placeholder {
    max-width: 120px;
    max-height: 60px;
    margin: auto;
    background-color: #505050;
    color: #FFFFFF;
}

img {
    max-width: 100%;
    height: auto;
}

但是，有两个问题:

1. 随着屏幕变窄和图像缩放，背景颜色从图像下方突出。 placeholder-div 像图像一样缩放，但它的高度(由浏览器计算)比图像高度高出 5px。这种差异从何而来？
2. 当图像未加载时(通过使图像 URL 无效来试一试)然后占位符 div 的高度崩溃。我怎样才能让它保持正确的高度？

仅供引用:实际使用的图像并不总是大小相同，但我会知道它们的尺寸并可以计算它们的纵横比。我会将这些值(如 120px)内联写入，而不是像示例中那样写入单独的 css 文件。

在此先感谢您的帮助!

Answer 1

将 display: block 添加到您的 CSS img 规则中，使其成为 block 元素而不是内联元素，您就可以开始了:Fiddle

将其中之一的 src="...."更改为 src=""在 fiddle 中，您将看到单元格本身已经缩放。

通过添加规则 img[alt] { font-size: 2vw; overflow: hidden 到你的 CSS，html alt="text" 也会缩放。当 alt 大于 120x60px 时，overflow: hidden 会截断多余的文本。

(注意:[alt] 在 CSS 中称为“属性”，如果您想学习创建自己的属性，请搜索“css 自定义属性”。)

参见 updated Fiddle

我建议不要放宽 placeholder 的宽度和高度规则，但您可以将其更改为 min-height/min-width 以至少显示某些内容“丢失”。或者更改为 max-width: 100% 并删除 max-height，但这取决于您的要求。您需要限制某处图像的大小(例如，以 px 为单位的表格宽度及其子项的(最大)宽度，以 % 为单位) > ).