logo标签列表

iPhone邮件中HTML电子邮件的图片/ div大小调整

htmlioscssemail
13

我正在使用MadMimi进行电子邮件推广。到目前为止，我的电子邮件在所有浏览器和设备上（包括iPad上的iOS Mail应用程序）看起来都很一致。但是，在iPhone上的iOS Mail应用程序中存在一个奇怪的图像调整大小问题。请参见下面的CSS和屏幕截图。正如您所看到的，图像突破了其父元素的宽度。有人知道为什么会发生这种情况或如何纠正它吗？谢谢。

CSS：

.outer-wrapper {
     width: 600px;
     max-width: 100%;
     margin: 0 auto;
}
.inner-wrapper {
     width: 100%;
     border-radius: 10px;
     overflow: hidden;
     background-color: white;
     border: 1px solid #dddddd;
}
img {
     width: 600px;
     max-width: 100%;
     height: auto;
}

HTML：

<body>
   <div class="outer-wrapper">  
      <div class="browser">Email look weird? Be sure to enable images, or view it on the web <a href="[[web_link]]" target="_blank">here</a>.</div>
      <div class="inner-wrapper">
         <a href="#"><img src="http://pintsizedtreasures.com/newsletters/header-2.jpg"></a>
         <div class="body-wrapper">
            [content...]
         </div>
      </div>
   </div>
</body>

iPhone邮件截图

4个回答
4

我通过试错找到了答案。我已经颠倒了.outer-wrapper的max-width和width值。正确的CSS应该是：

.outer-wrapper {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
}

我认为的情况是，当用户使用iPhone浏览时，视口内的像素少于600个，因此渲染器会回退到.outer-wrapper的max-width。由于.outer-wrapper的值为100%，并没有声明像素值，所以img的宽度会回退到视口宽度，而不是其父元素的宽度。所有其他浏览器的视口大小都大于600像素，这是一个声明的像素值，并且不会出现问题（例如iPad、桌面等）。显然这是我的一个愚蠢疏忽。
以下是期望的效果。

enter image description here

2

由于图片状态为100%，它将占用整个宽度。如果您希望它与字母具有相同的宽度，则应将其移至该div标签内。我假设它不是这样，因为我看不到html代码。

如果您对不同设备具有特定的css部分，则可以在那里更改它。另一种选择是仅为此iOS设备创建一个css类并在那里编辑宽度，以便您不会更改其他工作设备。

我添加了HTML。我知道图像的100％宽度将填充其父元素，而不是body，而是一个div，该div也有一个父元素。 - preahkumpii
为什么不把内部包装器放在主体包装器中，这样它就可以使用父元素的宽度？或者像我之前说的那样，您可以创建CSS类来选择何时在iOS设备上使用不同的宽度。例如@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { width: 80%; } - Source Code
我没有将内部包装器放在主体包装器中，因为图像是标题图像，而内容与该图像分开。内容中还有图像。主体包装器也会有边距等。除此之外，核心问题仍然存在，为什么图片在iPhone上的行为不像其他客户端那样。 - preahkumpii
0
如果您使用嵌套div的表格，您应该修复内联样式语法。 

<table>
  <tr>
    <td>
      <div style="width:100%; max-width: 600px">
        <img src="url/file.jpg" alt="image description" />
      </div>
    </td>
  </tr>
</table>

-1

使用表格 `

<table>
        <tr>  
          <td>
             <div style="width=100%">
                 ...your content 
             </div>
          </td>
        </tr>
     </table>

`

这对我有用。

你的HTML格式不正确。你已经打开了引号但是没有关闭它们。 - Greg the Incredulous
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接