文章/答案/技术大牛

发布

社区首页 >问答首页 >表单元格中图像的响应式缩放导致Chrome出现间隙

问表单元格中图像的响应式缩放导致Chrome出现间隙
EN

Stack Overflow用户

提问于 2014-10-21 23:40:02

回答 2查看 1.8K关注 0票数 0

我正在尝试设置我公司的电子邮件，使其对移动设备更友好。不幸的是，因为这是基于电子邮件的，所以我不得不像1999年那样构建它们:主要是表格和图像切片。

我有设置为特定宽度的表格，没有定义高度。每个表不能超过一行，通常是2-3列。每个表格单元格一个图像。目前，我还没有定义表格单元格或图像的尺寸。

这是我正在编写的新的响应式代码：

@media (max-width: 670px) { 
    body { 
        background-color: red !important; /* for testing */
    }
    table {
        width: 100% !important;
        height: auto !important;
    }
    table img {
        width: 100% !important;
        height: auto !important;
    }
}
@media (max-width: 480px) { 
    body { 
        background-color: blue !important; /* for testing */
    }
}

http://codepen.io/BevansDesign/pen/CnAfB

正如您在我的Codepen页面上看到的，如果缩小窗口的宽度，图形也会相应地缩小。然而，在Chrome中，由于基于像素的缩放有点奇怪，我得到了很多图像之间的间隙(绿色线条)。(在FF中运行良好，当然在IE8中完全不起作用，我还没有在其他任何平台上测试过它。)

有人知道我怎样才能消除这些差距吗？我尝试将图像高度设置为100%，但这只会使图像保持其原始高度并水平挤压它们。

我知道我可以通过手动设置所有的尺寸来解决这个问题，但我正在寻找一个尽可能少调整的解决方案，因为我每周都会发送这些电子邮件2-3次。

谢谢你的帮忙!

responsive-design

html

css

回答 2

Stack Overflow用户

发布于 2014-10-22 00:24:33

这可能会对你有帮助

选项1。)将style="display:block“添加到您的图像中

<img src="http://www.test.com/test.jpg" style="display:block">

选项2。)如果您的图像高度大于16px，请将图像中的"align“属性设置为以下任一项: absmiddle、greater、left、right、absbottom、texttop或top

<img src="http://www.test.com/test.jpg" align="absbottom">

选项3。)将图像放在具有style="line-height:10px“(或更低)的块元素中示例：

<div style="line-height:10px"><img src="http://www.test.com/test.jpg"></div>

选项4。)将图像放在字号为“style=-size:2px”(或更低)的块元素中

<div style="font-size:2px"><img src="http://www.test.com/test.jpg"></div>

选项5。)Add style="float:left“或style="float:right”

<img src="http://www.test.com/test.jpg" style="float:left">

票数 1

Stack Overflow用户

发布于 2017-10-24 15:11:41

对于这个问题，我找到的最好的解决方案是使用背景图像，将切片保存为透明GIF格式的网格。缝隙仍然出现，但它们不可见。

在下面的示例中，第一个表使用常规切片，当您在浏览器中缩放它时，您将看到出现1或2个像素的窄间隙。Chrome似乎是最糟糕的，但在其他浏览器上也会发生这种情况。

第二个表格使用了我的背景和GIF技术。响应式样式将图像切换为视网膜友好的高分辨率版本。

<!DOCTYPE html>
<html>
<head>
<title>Slices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <style type="text/css">
        body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
        table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        img { -ms-interpolation-mode: bicubic; }
        img { border: 0; line-height: 100%; outline: none; text-decoration: none; }
        table { border-collapse: collapse !important; }
        body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }


    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      .switch-background {
        background-image: url(http://www.interactiveemail.co.uk/DB/slices/full_image_hi.jpg) !important; 
        background-repeat: no-repeat !important; 
        background-size: 100% !important; 
      }
}


        @media screen and (max-width: 640px) {
            table { width: 100% !important; max-width: 414px !important; }
            table img { width: 100% !important; height: auto !important; }
      .switch-background {
        background-image: url(http://www.interactiveemail.co.uk/DB/slices/full_image_hi.jpg) !important; 
        background-repeat: no-repeat !important; 
        background-size: 100% !important; 
      }



        div[style*="margin: 16px 0;"] { margin: 0 !important; }
    </style>

</head>

<body style="background-color: #ffffff; margin: 0 !important; padding: 0 !important;">

<!-- 100% table start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" bgcolor="#ffffff">

            <!-- Regular slices -->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_01.jpg" alt="Slice 1" width="201" height="106" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_02.jpg" alt="Slice 2" width="266" height="106" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_03.jpg" alt="Slice 3" width="133" height="106" style="display: block;"></td>
                </tr>
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_04.jpg" alt="Slice 4" width="201" height="172" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_05.jpg" alt="Slice 5" width="266" height="172" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_06.jpg" alt="Slice 6" width="133" height="172" style="display: block;"></td>
                </tr>
                <tr>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_07.jpg" alt="Slice 7" width="201" height="123" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_08.jpg" alt="Slice 8" width="266" height="123" style="display: block;"></td>
                  <td><img src="http://www.interactiveemail.co.uk/DB/slices/slice_09.jpg" alt="Slice 9" width="133" height="123" style="display: block;"></td>
                </tr>
            </table>            

            <br><br>

            <!-- Transparent slices -->
            <table width="600" border="0" cellpadding="0" cellspacing="0" align="center" background="http://www.interactiveemail.co.uk/DB/slices/full_image_lo.jpg" class="switch-background">
              <tr>
                <td><!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:401px;">
                    <v:fill type="tile" src="http://www.interactiveemail.co.uk/DB/slices/full_image_lo.jpg" color="#ffffff" />
                    <v:textbox inset="0,0,0,0">
                    <![endif]-->
                    <div><table width="600" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_01.gif" alt="Slice 1" width="201" height="106" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_02.gif" alt="Slice 2" width="266" height="106" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_03.gif" alt="Slice 3" width="133" height="106" style="display: block;"></td>
                      </tr>
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_04.gif" alt="Slice 4" width="201" height="172" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_05.gif" alt="Slice 5" width="266" height="172" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_06.gif" alt="Slice 6" width="133" height="172" style="display: block;"></td>
                      </tr>
                      <tr>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_07.gif" alt="Slice 7" width="201" height="123" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_08.gif" alt="Slice 8" width="266" height="123" style="display: block;"></td>
                        <td><img src="http://www.interactiveemail.co.uk/DB/slices/blank_slice_09.gif" alt="Slice 9" width="133" height="123" style="display: block;"></td>
                      </tr>       
                    </table></div>
                    <!--[if gte mso 9]>
                    </v:textbox>
                    </v:rect>
                    <![endif]-->
              </td>
             </tr>
            </table>    

        </td>
    </tr>
</table>
<!-- 100% table end -->

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26490713

复制

相似问题

问表单元格中图像的响应式缩放导致Chrome出现间隙
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单元格中图像的响应式缩放导致Chrome出现间隙EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表单元格中图像的响应式缩放导致Chrome出现间隙
EN