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>.
Related
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.
I am aware this type of question has been asked before, but the solutions given there are not giving the resolution for me.
I want the <td> to have 70% width, but the inserted image is pushing the widths for received emails in outlook (I use MS Outlook Pro 2013). I do not want to use unit px because that doesn't work to cover all screen widths. A solution could be to use <div> instead of <td>, but I was told that <div> isn't supported correctly everywhere. Please advise.
HTML
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header" style="background-color: #fee7f3; color: #ffffff; border-radius: 3px 3px 0 0;">
<tbody>
<tr>
<td style="width: 70%;"><img src="/example.jpg" style="width: auto; height: auto; float: left; box-sizing: border-box;"></td>
<td style="width: 30%;"><h1>Example txt</h1></td>
</tr>
</tbody>
</table>
My Attempts
I wrapped the <img> with a <p> tag
I added display: inline-block for <td>
I added attributes width and height for the <td> and <img>
I added width: 100% and height: auto for <img>
The good news is that Outlook doesn't support #media queries so you can override any set values you need to use in email.
Outlook tends to ignore inline styles for image width. Assuming you want 600px-wide email and your image is 400px, code the width like this:
<img src="example.jpg" width="400" style="width: 70%; height: auto;" />
Some other things you should be aware of is that box-sizing doesn't work in most email clients. border-radius does not work with Outlook.
https://www.campaignmonitor.com/css/box-model/box-sizing/
https://www.campaignmonitor.com/css/box-model/border-radius/
Good luck.
i've got a table 3x3 with Images in it. I want the table to scale with the windows width and height.
scaleing with the width is not a problem and working so far, but i don't get it working with the height. The aim is to see the whole table with no gaps between the images. Also the table should stop growing if the images are at 100% so no forced 100%.
is this possible in CSS only?
thanks for your help
that is what i got so far:
<head>
<style>
* { margin: 0;padding: 0; line-height: 0;}
html, body
{
height: 100%;
}
#imgHolder {
max-width:100%;
max-height:100%;
height: auto;
width:auto;
border-collapse: collapse;
}
img {
width: 100%;
}
</style>
</head>
<body>
<table id="imgHolder">
<tr>
<td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
</tr>
<tr>
<td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
</tr>
<tr>
<td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td>
</tr>
</table>
</body>
here is a fiddle: https://jsfiddle.net/xhaqzzkj/
To do window height, use viewport height vh, such as 100vh or 98vh:
https://developer.mozilla.org/en-US/docs/Web/CSS/length
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
and use calc() with it, such as calc(100vh - 16px), assuming you are using a modern browser.
Since you also have this requirement:
Also the table should stop growing if the images are at 100% so no forced 100%
Do you mean if the images are not that big, don't force them to become big just to make the table 100% of viewport width and height?
If so it seems like you can have a table that contains these images, but have a max-width and max-height as 100vw and 100vh, respectively.
Or you can make the td and images have max-width: 33vw and max-height: 33vh like the following samples: https://jsfiddle.net/xhaqzzkj/7 and https://jsfiddle.net/xhaqzzkj/8
I have an image <img> in <td></td> tags, i want to set max fixed width, beacause when image is large, it goes out from layout and my table became to large. And if the image width is less then max width, it should have original size param.
How can i do that without javascript?
<table>
<tr>
<td>
<img>
</td>
</tr>
</table>
you can do it like this:
<img src="..." class="img" />
css:
.img {
max-width: 100px;
}
I have something that looks like this:
<table>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
...
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
<tr><td><img src="..." /></td><td>data</td><td>data</td><td>and more data</td></tr>
</table>
The objective is, if possible, to have the image to "kinda" ajust the size of the row.
Let's say, the image is of size 200x200 (in px). I want to image to shrink up to 100px if the row where it is thinner then the size of the image (it it didn't have the image).
For example:
If, without the image, the row is < 100px height, with image, it becomes 100px height
If, without the image, the row is 140px height, with image, it stays 140px height
If, without the image, the row is 200px height, with image, it stays 200px height
If, without the image, the row is 260px height, with image, it stays 260px height but the image does not get any big than the 100%, which is the 200px.
I have already tried using a min-height + height + max-height for both the td and the img tags but nothing was changing from the browser's perspective.
Notes:
I'm using the doctype for XHTML 1.1
I don't need answers that require JavaScript. I already know how to do with JS (even without jQuery). I want a CSS only answer.
You can try this code:
<table width="100%" border="1">
<tr>
<td height="100">
<img src="http://dystroy.org/re7210/img/tartare-saumon-creme-salade-harengs-pommes-de-terre-800.jpg" style="width:auto; height:100%;"/>
</td>
</tr>
</table>
See the DEMO