Ufdjrw

"Seemed to had" is it correct?

Stars Make Stars

Proof involving the spectral radius and the Jordan canonical form

Is it ethical to give a final exam after the proffesor has quit before teaching the remaing chapters of the course?

Can inflation occur in a positive-sum game currency system such as the Stack Exchange reputation system?

Is there a concise way to say "all of the X, one of each"?

Antler Helmet: Can it work?

Storing hydrofluoric acid before the invention of plastics

Is it true that "carbohydrates are of no use for the basal metabolic need"?

Does surprise arrest existing movement?

3 doors, three guards, one stone

How to bypass password on Windows XP account?

List *all* the tuples!

What are 'alternative tunings' of a guitar and why would you use them? Doesn't it make it more difficult to play?

If a contract sometimes uses the wrong name, is it still valid?

Models of set theory where not every set can be linearly ordered

If Jon Snow became King of the Seven Kingdoms what would his regnal number be?

How much radiation do nuclear physics experiments expose researchers to nowadays?

What is the correct way to use the pinch test for dehydration?

How to deal with a team lead who never gives me credit?

What does the "x" in "x86" represent?

What are the pros and cons of Aerospike nosecones?

ListPlot join points by nearest neighbor rather than order

Why is "Consequences inflicted." not a sentence?

Stretching an image to fill the height of its table cell

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

1

I have a table cell of unknown height which contains an img. This img has a fixed pixel width, but I need it to stretch to fill (but not exceed) the entire height of the table cell. The width should remain the same no matter what the height.

Usually, I'd do this using height: 100%, but this doesn't appear to be working in this scenario:

img 
 display: block;
 width: 25px;
 height: 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td>
 <img src="https://placehold.it/20x20" />
 </td>
 </tr>
</table>

How can I make the image fill the height of its cell?

html css html-table html-email

share|improve this question

asked Mar 8 at 14:20

Aaron ChristiansenAaron Christiansen

6,05833653

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you added the height as an attribute on the image (not CSS) it would probably do what you want. <img src="https://placehold.it/20x20" height="100%" width="25" /> But the CSS background answer below is more flexible solution.
  
  – Bryce Howitson
  Mar 8 at 14:41
  

  
  
  
  

add a comment | 

2

1

I have a table cell of unknown height which contains an img. This img has a fixed pixel width, but I need it to stretch to fill (but not exceed) the entire height of the table cell. The width should remain the same no matter what the height.

Usually, I'd do this using height: 100%, but this doesn't appear to be working in this scenario:

img 
 display: block;
 width: 25px;
 height: 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td>
 <img src="https://placehold.it/20x20" />
 </td>
 </tr>
</table>

How can I make the image fill the height of its cell?

html css html-table html-email

share|improve this question

asked Mar 8 at 14:20

Aaron ChristiansenAaron Christiansen

6,05833653

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you added the height as an attribute on the image (not CSS) it would probably do what you want. <img src="https://placehold.it/20x20" height="100%" width="25" /> But the CSS background answer below is more flexible solution.
  
  – Bryce Howitson
  Mar 8 at 14:41
  

  
  
  
  

add a comment | 

I have a table cell of unknown height which contains an img. This img has a fixed pixel width, but I need it to stretch to fill (but not exceed) the entire height of the table cell. The width should remain the same no matter what the height.

Usually, I'd do this using height: 100%, but this doesn't appear to be working in this scenario:

img 
 display: block;
 width: 25px;
 height: 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td>
 <img src="https://placehold.it/20x20" />
 </td>
 </tr>
</table>

How can I make the image fill the height of its cell?

html css html-table html-email

share|improve this question

asked Mar 8 at 14:20

Aaron ChristiansenAaron Christiansen

6,05833653

img 
 display: block;
 width: 25px;
 height: 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td>
 <img src="https://placehold.it/20x20" />
 </td>
 </tr>
</table>

img 
 display: block;
 width: 25px;
 height: 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td>
 <img src="https://placehold.it/20x20" />
 </td>
 </tr>
</table>

img 
 display: block;
 width: 25px;
 height: 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td>
 <img src="https://placehold.it/20x20" />
 </td>
 </tr>
</table>

share|improve this question

asked Mar 8 at 14:20

Aaron ChristiansenAaron Christiansen

6,05833653

share|improve this question

asked Mar 8 at 14:20

Aaron ChristiansenAaron Christiansen

6,05833653

asked Mar 8 at 14:20

Aaron ChristiansenAaron Christiansen

6,05833653

asked Mar 8 at 14:20

Aaron ChristiansenAaron Christiansen

6,05833653

2 Answers
2

active

oldest

votes

2

Consider the image as background and you can easily achieve this. You can also keep the background-image as an inline style to be able to set it like an img element

.img 
 width: 25px;
 background-size:100% 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img" style="background-image:url(https://placehold.it/20x20)">
 </td>
 </tr>
</table>

In case you want to keep the use of img you can use position:absolute

.img 
 width: 25px;
 position:relative;

.img img 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img">
 <img src="https://placehold.it/20x20)"/>
 </td>
 </tr>
</table>

share|improve this answer

edited Mar 8 at 14:29

answered Mar 8 at 14:27

Temani AfifTemani Afif

83.3k104795

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is a really clean way of doing this! Thank you.
  
  – Aaron Christiansen
  Mar 8 at 14:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AaronChristiansen added another method
  
  – Temani Afif
  Mar 8 at 14:32
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @TemaniAfif Email clients like outlook will not render it right. This is for HTML email not for web.
  
  – Syfer
  Mar 9 at 7:28
  

  
  
  
  

add a comment | 

0

With email clients such as Outlook desktop 2007-2019, you need to specify the width of the image, especially if you are displaying it in a size that does not match it's physical size. Otherwise Outlook will ignore your style sheet and revert to the actual size.

For the height, you can generally leave it blank and add in the style sheet height: auto;

<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">

Good luck.

share|improve this answer

answered Mar 8 at 16:12

gwallygwally

1,8412618

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55065117%2fstretching-an-image-to-fill-the-height-of-its-table-cell%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

Consider the image as background and you can easily achieve this. You can also keep the background-image as an inline style to be able to set it like an img element

.img 
 width: 25px;
 background-size:100% 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img" style="background-image:url(https://placehold.it/20x20)">
 </td>
 </tr>
</table>

In case you want to keep the use of img you can use position:absolute

.img 
 width: 25px;
 position:relative;

.img img 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img">
 <img src="https://placehold.it/20x20)"/>
 </td>
 </tr>
</table>

share|improve this answer

edited Mar 8 at 14:29

answered Mar 8 at 14:27

Temani AfifTemani Afif

83.3k104795

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is a really clean way of doing this! Thank you.
  
  – Aaron Christiansen
  Mar 8 at 14:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AaronChristiansen added another method
  
  – Temani Afif
  Mar 8 at 14:32
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @TemaniAfif Email clients like outlook will not render it right. This is for HTML email not for web.
  
  – Syfer
  Mar 9 at 7:28
  

  
  
  
  

add a comment | 

2

Consider the image as background and you can easily achieve this. You can also keep the background-image as an inline style to be able to set it like an img element

.img 
 width: 25px;
 background-size:100% 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img" style="background-image:url(https://placehold.it/20x20)">
 </td>
 </tr>
</table>

In case you want to keep the use of img you can use position:absolute

.img 
 width: 25px;
 position:relative;

.img img 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img">
 <img src="https://placehold.it/20x20)"/>
 </td>
 </tr>
</table>

share|improve this answer

edited Mar 8 at 14:29

answered Mar 8 at 14:27

Temani AfifTemani Afif

83.3k104795

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is a really clean way of doing this! Thank you.
  
  – Aaron Christiansen
  Mar 8 at 14:28
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @AaronChristiansen added another method
  
  – Temani Afif
  Mar 8 at 14:32
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @TemaniAfif Email clients like outlook will not render it right. This is for HTML email not for web.
  
  – Syfer
  Mar 9 at 7:28
  

  
  
  
  

add a comment | 

Consider the image as background and you can easily achieve this. You can also keep the background-image as an inline style to be able to set it like an img element

.img 
 width: 25px;
 background-size:100% 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img" style="background-image:url(https://placehold.it/20x20)">
 </td>
 </tr>
</table>

In case you want to keep the use of img you can use position:absolute

.img 
 width: 25px;
 position:relative;

.img img 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img">
 <img src="https://placehold.it/20x20)"/>
 </td>
 </tr>
</table>

share|improve this answer

edited Mar 8 at 14:29

answered Mar 8 at 14:27

Temani AfifTemani Afif

83.3k104795

.img 
 width: 25px;
 background-size:100% 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img" style="background-image:url(https://placehold.it/20x20)">
 </td>
 </tr>
</table>

.img 
 width: 25px;
 position:relative;

.img img 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img">
 <img src="https://placehold.it/20x20)"/>
 </td>
 </tr>
</table>

.img 
 width: 25px;
 background-size:100% 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img" style="background-image:url(https://placehold.it/20x20)">
 </td>
 </tr>
</table>

.img 
 width: 25px;
 background-size:100% 100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img" style="background-image:url(https://placehold.it/20x20)">
 </td>
 </tr>
</table>

.img 
 width: 25px;
 position:relative;

.img img 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img">
 <img src="https://placehold.it/20x20)"/>
 </td>
 </tr>
</table>

.img 
 width: 25px;
 position:relative;

.img img 
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;

<table>
 <tr>
 <td>
 Here is some content.<br/>
 I would like the adjacent image to stretch to be<br/>
 the same height as it, but not have the image get<br/>
 any wider.
 </td>
 <td class="img">
 <img src="https://placehold.it/20x20)"/>
 </td>
 </tr>
</table>

share|improve this answer

edited Mar 8 at 14:29

answered Mar 8 at 14:27

Temani AfifTemani Afif

83.3k104795

answered Mar 8 at 14:27

Temani AfifTemani Afif

83.3k104795

answered Mar 8 at 14:27

Temani AfifTemani Afif

83.3k104795

0

With email clients such as Outlook desktop 2007-2019, you need to specify the width of the image, especially if you are displaying it in a size that does not match it's physical size. Otherwise Outlook will ignore your style sheet and revert to the actual size.

For the height, you can generally leave it blank and add in the style sheet height: auto;

<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">

Good luck.

share|improve this answer

answered Mar 8 at 16:12

gwallygwally

1,8412618

add a comment | 

0

With email clients such as Outlook desktop 2007-2019, you need to specify the width of the image, especially if you are displaying it in a size that does not match it's physical size. Otherwise Outlook will ignore your style sheet and revert to the actual size.

For the height, you can generally leave it blank and add in the style sheet height: auto;

<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">

Good luck.

share|improve this answer

answered Mar 8 at 16:12

gwallygwally

1,8412618

add a comment | 

With email clients such as Outlook desktop 2007-2019, you need to specify the width of the image, especially if you are displaying it in a size that does not match it's physical size. Otherwise Outlook will ignore your style sheet and revert to the actual size.

For the height, you can generally leave it blank and add in the style sheet height: auto;

<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">

Good luck.

share|improve this answer

answered Mar 8 at 16:12

gwallygwally

1,8412618

<img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">

share|improve this answer

answered Mar 8 at 16:12

gwallygwally

1,8412618

answered Mar 8 at 16:12

gwallygwally

1,8412618

answered Mar 8 at 16:12

gwallygwally

1,8412618