Problem: especially in Outlook, before the images are loaded the email inserts a square block equal to the width of the image. For my email, I have an image that spans the width of the email, but it's height is only 325px. Instead, it previews a 650px x 650px block. Is there any way to responsively and without Javascript prevent the square block from showing prior to images being loaded?
Code:
<table width="650" height="325" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="#" width="100%"/>
</td>
</tr>
</table>
You can give the image the original dimensions as the width and height attributes.
To ensure the image stays responsive you can add the following styles to the image:
<img src="#" width="650" height="325" style="max-width: 100%; height: auto;" />
max-width: 100%; ensures the image does exceed the parent element's width.
height: auto; will scale the height automatically to the width based on the given image dimensions.
Related
I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed.
The current code for each row is this:
<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
<td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
<td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center"># <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
<td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>
And the full code is here.
The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates.
I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the # symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?
Scrap the abspos approach.
For the all the img logos, remove width='15%' attribute.
Add a vh height property that changes with the height of the window, e.g.
<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
It's interesting how a table cell won't adapt to your resized image when you resize it by percentages. If you resize it with absolute values, it does the job.
Is there any solution to this?
Let's say we have an img with 200px width.
Now, 2 code scenarios.
First:
<td><img src="..." style="width: 50%; height: auto;" /></td>
Second:
<td><img src="..." style="width: 100px; height: auto;" /></td>
I would assume in both cases it will look the same, but it doesn't.
In the first case the td still has a width of 200px.
Only in the second case the td resizes to 100px width.
Percentual resizing is very important to me though. Is there any css trick for this problem?
Example: http://jsfiddle.net/xndks9r1/
With:
<td><img src="..." style="width: 100px; height: auto;" /></td>
you are setting the width of the image to a specific value.
With:
<td><img src="..." style="width: 50%; height: auto;" /></td>
you are setting the width of the image to 50% of whatever the width of the <td> is. In your Fiddle, the width of the <td> is set by the text in the right-hand column.
When you write <img style="width: 50%;" />, the 50% does not refer to 50% of the original image size. It actually refers to 50% of the parent's width, and in this case the parent is the <td>.
I'm trying to send and email with PHP. The content of this email have a grid with two images per row. So this div has a width of 48% that I put with CSS. My problem is that I need to put other images over the main one. But some mailers doesn't support position tag of CSS.
I have tried to create a table with 48% width and put the main image as backgroun-image and in each td the images that I need, but if it doesn't respect my image scale and it shows elongated.
How can I make a table adjust to it background-image respecting their scale? Or is there any other solution?
Here is my code:
<table class="tableimage" cellspacing="0" cellpadding="0" border="0" background="image.png"style="background-size: 100% 100%;width:48%">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>
EDIT:
Ok, let me explain. I'm trying to send by email an image with a png logo over it. My first try was to put the image with position relative and the logo with position absolute, but not all the mailers support css position tag. So I decided to try it using tables.
I have created a table with a background image and put the logo inside a td of this table. My background image needs to have a 48% width and auto heigth. How can I get my table adjust to the size of the background image?
I have an image which I would like to position near the right margin of my HTML page, and hover over all else on the page. I would also like the image to stay near the right margin when the window is resized. As of now, the image stays in a fixed position within the browser window instead, even appearing outside the page content area when the browser window is extended wide. My page content is centered in the browser window. Below is the code on the image:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="../images/FWA_INV_head.jpg" valign="top" align="center">
<img src="images/bannerX.png" border="0" class="image" style="position:absolute;z-index:90;>
and here is the CSS:
.image {
position:absolute;
opacity:.90;
-moz-opacity:.90;
filter:alpha(opacity=90);
}
Please help me see the error of my ways.
When positioning an absolute element your absolute position is positioned inside of the nearest relative position. So it's absolutely positioned inside the relative position. Also your inline style has no closing "
I have a problem that seems to only occurs in IE (i'm currently using IE8). Basically, i have web pages that consist of a header, content area and a footer. I am trying to stretch an image to be displayed as a left and right border in the content area. the image is not a solid color, so simply setting a border property would not work. In all browsers but IE, the image stretches just fine.
The site is heavily table based due to the fact that it is written for a CMS known as NetSuite. A lot of the tables and html are created by the CMS and are very difficult and tricky to modify.
You can see the page in action at - web site page
I have tried numerous combinations of height:100% and different positioning values with little help. One of the problems is that the height of the content area is dynamically set.
The code in place now looks like this:
<table border="0" cellpadding="0" cellspacing="0" width="1020" height="100%" align="center">
<tr style="height:100%;">
<!-- left side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
<td valign="top" width="400" align="center">
<!-- right side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
</tr>
<td style="height:100%; position:relative;">
<img style="position:absolute; top:0px; left:0px; width:100%; height:100%;" border=0 src="http://www.marware.com/images/body_outer_border.png" width="9" height="100%">
</td>
Make the img absoultely positioned at 0,0 with 100% width and height. And relative positioning on the td so the absolute positioning is relative to it. I'm relatively sure that this absolutely works in IE8.