图片宽度和垂直对齐

时间:2017-01-30 20:18:46

标签: html css zurb-foundation

我需要让图片的宽度为100%,这意味着图片应该填充空白区域,并与下面的文本垂直对齐。

My Example Site

代码适用于电子邮件简报,因此我使用的是基础。我无法在文档中找到我是如何做到的,因此我必须尝试别的。

如何让图片填满空白?

相关HTML代码

<body>
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <!-- The class, align, and <center> tag center the container -->
      <td class="float-center" align="center" valign="top">
        <center>

          <table class="wrapper" align="center">
            <tr>
              <td class="wrapper-inner" style="background-color: blue;">
                <table align="center" class="container">
                  <tbody>
                    <tr>
                      <td>
                        <table class="row">
                          <tbody>
                            <tr>
                              <th class="small-12 large-12 columns first last">
                                <table>
                                  <tr>
                                    <th>
                                      <center data-parsed="">
                                        <img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
                                      </center>
                                    </th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </table>
          <table class="wrapper" align="center">
            <tr>
              <td class="wrapper-inner" style="background-color: red;">
                <table align="center" class="container" >
                  <tbody>
                    <tr>
                      <td>
                        <table class="row">
                          <tbody>
                            <tr>
                              <th class="small-12 large-12 columns first last" style="background-color: yellow;">
                                <table>
                                  <tr>
                                    <th>Here is all my text is gonna be. Here is all my text is gonna be.Here is all my text is gonna be.Here is all my text is gonna be.</th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </table>
          <table class="wrapper" align="center">
            <tr>
              <td class="wrapper-inner" style="background-color: pink;">
                <table align="center" class="container" >
                  <tbody>
                    <tr>
                      <td>
                        <table class="row">
                          <tbody>
                            <tr>
                              <th class="small-12 large-12 columns first last" style="background-color: green;">
                                <table>
                                  <tr>
                                    <th>Here is all my text is gonna be.</th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </table>


    </center>
      </td>
    </tr>
  </table>
</body>

3 个答案:

答案 0 :(得分:1)

嗯,你必须修改两件事。

首先: 原始代码:

<table class="row">
    <tbody>
        <tr>
            <th class="small-12 large-12 columns first last" style="padding:0;">

最终代码:

<center data-parsed="">
    <img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>

第二:原始代码:

<center data-parsed="">
    <img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" style="width:100%;">
</center>

最终代码:

{{1}}

我最诚挚的问候!

答案 1 :(得分:1)

当然!,试试这个:

原始代码:

<table class="row">
<tbody>
    <tr>
        <th class="small-12 large-12 columns first last" style="padding:0;">

最终代码:

<table class="row">
<tbody>
    <tr>
        <th class="small-12 large-12 columns first last" style="padding:0 !important;">

答案 2 :(得分:1)

编辑** 这将起作用 **

最终版

更改&lt; IMG&GT;到&lt; DIV&GT;带图像背景:

<th class="small-12 large-12 columns first last" style="padding: 0 !important;">
  <table>
    <tbody>
      <tr>
        <th>
          <center>
            <div style="background:blue url('http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg') no-repeat center; background-size:cover;" alt="image of clever meme that made me chuckle">
              <img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" style="display:hidden;">
            </div>
          </center>
        </th>
     </tr>
  </tbody>