CODEWITHSUNDEEP
htmlcsszurb-foundation
McDuck4
McDuck4

Reputation: 662

Width on picture and vertical align

I need to make the picture to have a width on 100%, which means that the picture should fill out the white space, and align vertical with the text there is below.

My Example Site

The code is for email newsletters, therefore I am using foundation. I cannot find how I am doing that in the documentation, therefore I have to try something else.

How can I make the picture fill out the whitespace?

Relevant HTML code

<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>

Upvotes: 0

Views: 79

Answers (3)

Jacinto T&#225;rraga Hern&#225;ndez
Jacinto T&#225;rraga Hern&#225;ndez

Reputation: 92

EDIT ** THIS WILL WORK **

Final version

Change the < img> to < div> with image background:

<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>

Upvotes: 1

Jacinto T&#225;rraga Hern&#225;ndez
Jacinto T&#225;rraga Hern&#225;ndez

Reputation: 92

Sure!, try this:

Original code:

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

Final code:

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

Upvotes: 1

Jacinto T&#225;rraga Hern&#225;ndez
Jacinto T&#225;rraga Hern&#225;ndez

Reputation: 92

Well, you have to modify two things.

First of all: Original code:

<table class="row">
    <tbody>
        <tr>
            <th class="small-12 large-12 columns first last">

Final code:

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

And second: Original code:

<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>

Final code:

<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>

My best regards!

Upvotes: 1

Related Questions