how to fix same image sizes in the table (without oppressed image)?

Question

for setting width there's no problem, but when uploading a portrait image it looks annoying & I want all the images have same width & height, but keeping the image looks good (not stretced/oppressed). maybe like facebook photo profile in timeline ,

and it's my problem : https://d8e7ec01-a-62cb3a1a-s-sites.googlegroups.com/site/vanyfiles/1-horz.jpg

my html code :

<table>
   <tr>
      <td id="thumb_img">
         <img src="images/e-magz.png" width="100%" height="100%"/>
      </td>
      <td id="thumb_news">
         <div id="date">February 7,2013</div>
         <a href="#">This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh</a>
      </td>
   </tr>
</table>

my css code :

#thumb_news{
   padding: 5px;
}

#thumb_img{
   width: 25%;
   height: 100px;
   overflow: hidden;
   left: 0;
   right: 0;
   padding-right: 5px;
}

score 1 · Accepted Answer · answered Nov 11 '13 at 05:02

you must try to make another wrapper for your images, and define some width and height do you want, :) and don't forget img don't have height=100% :D just delete it

HTML

`

  <td id="thumb_img">
      <div class="wrap_img">         
          <img src="http://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-frc3/1463202_599544233439021_1446517358_n.jpg"  width="100%"/>
      </div>
  </td>
  <td id="thumb_news">
     <div id="date">February 7,2013</div>
     <a href="#">This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh</a>
  </td>

`

CSS

.wrap_img{ display:block; width:100px; height:100px; overflow: hidden; }

check this http://jsfiddle.net/a9un9hari/svbSG/

score 0 · Answer 2 · edited May 23 '17 at 12:19

EDIT

The below information is helpful if you are using DIVs but not for tables

You have width="100% and height="100% inline in your <img> tag. This is forcing the image to BE the width and height of the containing div, but that's not what you want.

Try leaving just the width, and you might put it into your CSS, e.g.:

.thumb_img img {
  width: 100%;
}

The height will sort itself out. You already have overflow: hidden on the DIV.

Note that I was using .thumb_img not #thumb_img—that's for <td CLASS="thumb_img"> not <td ID="thumb_img">. If you are doing thumbs, then likely you are doing more than one. And CSS IDs must only be used for one element on a page.

FOR TABLES

You will need to set a width on the table, and table-layout: fixed on the TABLE element, for this to work, according to this answer on Stack Overflow.

If possible I would recommend using DIVs for a situation like this, as they are much more malleable to various layout needs.

how to fix same image sizes in the table (without oppressed image)?

2 Answers2