`Incorporating width and vertical alignment in an image`

I am trying to figure out a way to make the image fill up 100% of the width, aligning it vertically with the text below. The code I'm working on is for email newsletters using foundation.

Check out my Example Site

Unfortunately, I can't seem to find the solution in the documentation and need to explore other options. How can I achieve this layout where the picture fills all the white space?

Here's the relevant HTML code:

<body>
  <!-- Wrapper for the body of the email -->
  <table class="body" data-made-with-foundation>
    <tr>
      <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>This is where all my text goes. This is where all my text goes. This is where all my text goes.</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>More text goes here.</th>
                                    <th class="expander"></th>
                                  </tr>
                                </table>
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </table>


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

Answer №1

To make the necessary changes, you'll need to adjust two things.

Firstly: Original snippet:

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

Updated snippet:

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

Secondly, the original code is as follows:

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

Updated version:

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

Best regards!

Answer №2

Of course! Give this a shot:

Here is the original code snippet:

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

And here is the updated version:

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

Answer №3

UPDATES ** FOLLOW THESE STEPS **

Final draft

Replace the < img> tag with a < div> element containing an 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating distance with the power of animate.css

I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

Why does the fillText() method in HTML5 Canvas erase everything after using the clearRect() method?

Whenever I use the writeTextToCanvas method before the clearCanvas method, everything works perfectly. However, if I call the clearCanvas method first and then writeTextToCanvas, the drawing functions work fine after clearing the canvas but the fillText fu ...

Using Custom .woff Format Fonts in Sendgrid: A Guide

Having trouble with implementing custom fonts in Sendgrid. While Google fonts work fine, the custom .woff format font doesn't seem to cooperate. I've attempted three solutions below. Solution number 1 shows up in the Preview tab but not in the em ...

"Data is not defined" error message is triggered when using jQuery DataTable Row Details

While utilizing jQuery Data Tables to construct a datatable with row details, I encountered an error in jquerydatatables.js: data is undefined The JavaScript code being used is: $(document).ready(function() { var dt = $('#tbl_cheque_history' ...

Issue with HTML: The heading is not aligned on the same line as the logo

My goal was to create a website dedicated to Manchester United merchandise. I started by inserting the logo and adjusting everything accordingly, but I encountered an issue where the heading and line I inserted were not aligned properly. Here is the proble ...

How to select a button within a table using Selenium and C#?

I'm struggling with a section of HTML code. My goal is to use the selenium chrome driver in C# to navigate a website and create a ticket. However, I've encountered an issue where I need to select a tab to check some checkboxes, but all the tabs h ...

When using $dialogs.create on my website, a popup form appears with specific formatting limitations dictated by the defining code

When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

I'm trying to create a horizontal list using ng-repeat but something isn't quite right. Can anyone help me figure out

Feeling a bit lost after staring at this code for what seems like an eternity. I'm trying to create a horizontal list of 2 image thumbnails within a modal using Angular's ng-repeat. Here's the HTML snippet: <div class="modal-body"> ...

jQuery Conditional String Manipulation

I have set up a system where users can input values and make selections from a drop-down menu, which then get integrated into JavaScript code to generate customized sentences based on their inputs. Once the user clicks submit, the sentence is formed. It&ap ...

What is the best way to reverse a condition in CSS?

Here is my HTML/CSS code, I am relatively new to this field. Please let me know if I have overlooked anything. .dropdown-menu>li>a { padding: 3px 5px; } <li> <a id="btn-other-1" href="#"> <!–- I do not want apply css for t ...

Counter is effective for the initial post, yet it does not function properly for the subsequent post

Can anyone help with an issue I'm having with my JavaScript counter? It works for the first comment, but not the second one. This problem persists whether I use PHP or JavaScript. Below is the JavaScript code for the counter: var count = (function() ...

connect to new database using mysqli_find_cat

<?php $host = "localhost"; $username = "root"; $password = ""; $db = "mineforums"; $connect = mysqli_connect($host, $username, $password, $db) or die(mysqli_error($connect)); ?> Here is the PHP snippet that connects to my databa ...

Generate a chart using the REST object by organizing the information in a column format

I am currently working with a REST service that returns a specific object with multiple values and IDs. Here is an example of the object: [ { "id": 100, "value": "2452" }, { "id": 100, "value": "2458" }, { "id": 1, "value ...

How can a variable value be implemented in HTML style within Jinjia2?

Wondering how to dynamically position a small image on a web page based on a variable value? For instance, if the v_position variable is set at 50, you want the image to be centered horizontally. And if it's set at 100, the image should display at the ...

Issue with table cell resizing improperly with scrollable pre content

I'm facing a challenge with resizing my table cell correctly within a variation of the "holy grail" layout. The behavior differs when displaying my main content as a block versus a table-cell. The issue seems to stem from having a scrollable pre bloc ...

When writing CSS, ensure there is no space between selectors and classes of elements

Can you explain the distinction between using a css selector (like p) and assigning a class to an element (.cat)? p.cat{ } Vs. p .cat{ } Appreciate your help! ...

Displaying HTML widget in an external browser using R

Is there a way to directly display an HTML widget (such as one created by dygraphs) in an external browser like Chrome? Saving the widget, creating an HTML page, linking it to the widget, and using browseURL could be an option, but I am looking for a more ...