CODEWITHSUNDEEP
htmlcsshtml-table
user6751084
user6751084

Reputation:

How can I set the width/height of td tag in which image is included?

I want to set the width and height of td tag , which have and tag inside. So , what I want to do is , no matter whatever the image size is , but it should be taken according to the width/height of td tag.

Example:

If image size is 200 * 100 and td tag's width and height is 100*50. then it should take 100 * 50 , according to the width and height of td tag.

<tr>
  <td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="100" height="100"><img src="http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png" width="70" height="70" ></td>
</tr>

I can't use position property for the same.

Upvotes: 0

Views: 1635

Answers (2)

zer00ne
zer00ne

Reputation: 43880

Give <img> width: 100% and height:auto

Enter a number in the box and it will set the <td> to that dimension, the <img> will conform.

SNIPPET

$('#in1').on('input', function() {
  var dim = $(this).val();
  $('#animate').height(dim).width(dim);
});
img { width: 100%; height:auto}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
    <td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="50" height="50">
      <img src='http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png'>
    </td>
  </tr>
</table>

<input id='in1'>

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

try this.

display:block;
width:100%;
height:auto;

Upvotes: 1

Related Questions