0

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

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

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

正如您在下面的小提琴中看到的那样，我已经走得很远了：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 文件中写入。

提前感谢您的帮助！

4

2 回答 2

0

添加display: block到您的 CSSimg规则以使其成为块元素而不是内联元素，您就可以开始了：小提琴

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

img[alt] { font-size: 2vw; overflow: hidden }通过向您的 CSS添加规则，htmlalt="text"也将缩放。当大于您的 120x60px时，将overflow: hidden多余的文本剪掉。alt

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

查看更新的小提琴

我建议不要放弃 的宽度和高度规则placeholder，但您可以将其更改为 min-height/min-width 以至少显示“缺少”某些东西。或更改为max-width: 100%并删除max-height，但这取决于您的要求。您需要将图像的大小限制在某处上下线（例如，给表格一个以px为单位的宽度，它的孩子是一个以%为单位的（最大）宽度）。

于 2015-11-19T12:58:26.500 回答
0 
Remove:

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

    img {
       max-width: 100%;
       max-height: 100%;
    }
于 2015-11-19T11:46:42.363 回答