Question

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

我想放置几个内嵌图像，随着屏幕变窄而缩小。我通过使用css表和table-cell完成了这个，让图像缩放。到目前为止没问题。

但是，由于图像经常被电子邮件客户端阻止，我被要求创建一种灰色的占位符，显示图像＆＃34; alt text＆＃34;没有加载图像时。我希望这个占位符与包含的图像具有相同的大小，并且也可以缩小宽度。

我走得很远，你可以在下面的小提琴中看到：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。这种差异来自哪里？
当没有加载图像时（仅通过使图像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 =＆＃34; ....＆＃34;其中一个是src =＆＃34;＆＃34;在小提琴中你会看到细胞本身已经缩放。

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

（注意：[alt]在CSS中称为＆＃39;属性，搜索＆＃c; css自定义属性＆＃39;如果您想学习创建自己的。）

请参阅updated Fiddle

我建议不要忽略placeholder的宽度和高度规则，但是你可以将它改为min-height / min-width，以显示至少缺少某些东西＆＃39;。或者更改为max-width: 100%并删除max-height，但这取决于您的要求。您需要将图像的大小限制在线上或向下的某个位置（例如，在 px 中为表格提供宽度，在中为其提供一个（max-）宽度的宽度）％）。

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

2 个答案: