Ensuring the correct width for a .png image in an email newsletter for Outlook 2013

After creating an email newsletter that works perfectly on all email clients except Outlook 2013, I realized that the image I included is not adhering to the table width specified. Instead, it is defaulting to its own width of 658px. View image here

Below is the code snippet for the table:

<table bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600px" align="center">
  <tbody>
    <tr>
      <td style="align:center;vertical-align:top;width:600px"> 
        <div style="width:600px;align:center">
          <img src="images/demo1.png" style="width:600px">
        </div>
      </td>
    </tr>
  </tbody>
</table>

I would appreciate any suggestions on how to resolve this issue and properly place the image within the table.

htmlcssemailoutlooknewsletter

Answer №1

<table bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600px" align="center">
<tbody><tr>
<td style="align:center;vertical-align:top;width:600px"> 
<div style="width:300px;align:center">
<img src="images/demo1.png" width="300">
</div>
</td>
</tr>
</tbody></table>`

Another option to consider:

<img src="images/demo1.png"  style="margin: 0; border: 0; padding: 0; display: block;" width="300">

Answer №2

For a solution, try adjusting the width within the div and td tags, and set the image tag's width to 100%.

<table bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600px" align="center">
<tbody><tr>
<td style="align:center;vertical-align:top;width:600px"> 
<div style="width:300px;align:center">
<img src="images/demo1.png" style="width:100%;">
</div>
</td>
</tr>
</tbody></table>`

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

Issue with displaying data using a custom pure pipe and boolean in ngIf condition

For my current web project, I require a friendship/follow feature. There are two roles involved: admins and regular users. Regular users have the ability to follow other users, while admins do not possess this capability. When a user wishes to follow anot ...

htmlangulartypescriptangular-ng-ifangular-pipe

Osclass Website Alert: Multiple H1 tag Issue Detected

I operate a website called MyMobPrice and utilize OsClass for its functionality. However, I am encountering an error on each product page stating "More than One H1 Tag found." The issue lies within the two sets of H1 codes designed for desktop and mobile ...

phphtmlosclass

Transforming a Joomla template into a standard HTML template

I have a question about Joomla. Although I already have a Joomla template that was not originally intended for use with Joomla, I would like to utilize it as an HTML template so I can easily modify and edit it without using Joomla. Therefore, I am looki ...

phphtmljoomla

Receive information from a form and store it in an array

Struggling to figure out how to convert this into an array. I'm having trouble grasping the concept of taking input from a form and storing it in an array. In my project instructions, it clearly states: Do NOT save the input in variables and then tra ...

javascripthtmlarrays

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that both the domain-label and icon- ...

htmlcssreactjsresponsive-design

Creating a custom fav icon within a button with CSS styling

https://example.com/code-example Hey there, I'm attempting to replicate the button showcased in the code example above. However, I'm facing a challenge when trying to incorporate the stars without altering the existing script. Another issue is w ...

cssfavicon

Styling elements using the nth-child selector in JavaScript

I am trying to apply a CSS class based on the combined height of the 2nd and 3rd child elements. For example, if the height of the 2nd child plus the height of the 3rd child equals a certain value, I want to add a specific class. Here is my JavaScript cod ...

javascriptcss

Even after dynamically removing the class from the element, the Click event can still be detected

My buttons have a design like this: <a class="h-modal-btn branch-modal-btn"> Buy Now </a> The issue arises when I need to remove certain classes and add attributes to these buttons based on the query string in the URL. Skipping ahead ...

javascripthtmljquerycss

Troubleshooting: Border not showing up in Tailwind CSS (React JS)

Below is the code snippet from my JSX file: import { useState, useEffect } from "react"; import { PropTypes } from "prop-types"; import { HashtagIcon } from "@heroicons/react/24/outline"; // Function to fetch categories from the API (temporary replaced wi ...

cssreactjsmaterial-uitailwind-cssborder

Identify the currently active subitem within the item-active class in a PHP carousel slider

I am working on creating an image carousel slider with 4 items and 4 slides each. These images will act as radio buttons, and I want to highlight the slide corresponding to the selected radio button. So, when the carousel loads, the selected slide should b ...

javascriptphptwitter-bootstrapcss

Customizable dropdown menu design using HTML and CSS

Hello everyone, this is my very first post on Stack Overflow and I'm a bit unsure about the rules regarding posting. Please feel free to point out any mistakes I may have made. I've searched through the forums but haven't found a clear answe ...

htmlcssdropdown

Can Jquery be utilized to signal a language change?

I'm working on my portfolio website that will be available in two languages, Thai and English. I have successfully implemented language buttons for changing between the two languages. However, I am facing an issue with the language selection when nav ...

javascriptphpjqueryhtml

Is it possible to align a clip-path starting from the right edge?

On my webpage, I have a unique hamburger icon that is positioned 2rem away from the right and top edges. I am looking for a convenient way to create a clip path that grows from its center point. Calculating the center point is not difficult but unfortunate ...

cssclip-path

The hover effect flickers in Firefox, but remains stable in Google Chrome

Here is an example link to check out: I am facing a dilemma on how to solve this issue and unsure if it is related to jQuery or the DOM structure. If you have any suggestions, they would be greatly appreciated. Thank you! ...

jquerycsshtml

Input field, upon receiving focus, triggers a subtle shift in the position of the submit button

Thank you for the assistance, I believe this issue should be an easy fix. I have added a custom :focus style to my input that removes the default outline and adds a box shadow and border. However, when the input field is focused, the submit button located ...

cssforms

Capture information from an HTML5 form and securely store it in a MySQL database

I have a simple web form that includes a "date" type input field. I want to retrieve the date entered by the user and store it in my MySQL database, which has a DATE type column. I am looking for some PHP/JS magic to facilitate the communication between t ...

phpmysqlhtmlformsdate

What is the method for adjusting the subheader color on a Material UI card component?

How can I change the subheader text color to white in a Material UI Card with a dark background? Here is my code: const useStyles = makeStyles(theme => ({ menuColor: { backgroundColor: theme.palette.primary.main, color: '#ffffff', ...

cssreactjsmaterial-ui

When using flexgrid, be aware that adjacent divs on the same row may shift position when applying floats

Struggling with aligning the divs in a row when floating one of them? Here's a snippet to illustrate the issue: .flex-grid { display: flex; justify-content:space-between; } .flex-grid .rcorners1 { border-radius: 25px; background: green; ...

htmlcssflexbox

re-establishing multiple selections in a dropdown menu in PHP/HTML

Hey, I've got this multi-select listbox... <select id="extfeat" name="extfeat[]" size="6" multiple=""> <option value="Wheel_Chair Accessible">Wheel Chair Accessible</option> <option value="Fruit_Trees">Fruit Trees& ...

phphtmlmulti-select

Leveraging the Power of SASS Variables Across Your Entire NativeScript Application

Currently, I am in the process of developing an app using NativeScript 6.4.1 along with Angular 8. In order to enhance my styling capabilities, I have decided to incorporate SASS due to its advantageous features like variable names. My designer has suppli ...

cssangularsassnativescript