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

Question

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

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

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

我已经走得很远了，你可以在下面看到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;
}

但是，有两个问题：

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

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

在此先感谢您的帮助！

Answer 1

Remove:

img {
   height: auto;
}    
problem-1 & 2: 

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

Answer 2

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

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

通过将规则 img[alt] { font-size: 2vw; overflow: hidden } 添加到您的 CSS，html alt="text" 也会扩展。当 alt 大于 120x60px 时，overflow: hidden 会删除多余的文字。

(注意：[alt]在CSS中被称为'attribute'，想学的可以搜索'css custom attribute'创建你自己的。）

见updated Fiddle

我建议不要放松 placeholder 的宽度和高度规则，但您可以将其更改为 min-height/min-width 以至少显示某些内容 'is missing'。或者更改为 max-width: 100% 并删除 max-height，但这取决于您的要求。您将需要在某处上下限制图像的大小（例如，给 table 一个宽度 px 并且它是 children a（最大-) % 中的宽度).

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

How to create a div in the same size as the contained image. Both should be responsive

html

css

image

responsive-images