jquery - 如何修复表格中相同的图像尺寸(没有被压迫的图像)？

Question

对于设置宽度没有问题，但是当上传肖像图像时它看起来很烦人＆我希望所有图像具有相同的宽度和高度，但保持图像看起来不错(不拉伸(stretch)/压迫)。也许像时间轴中的 facebook 照片个人资料，

这是我的问题:https://d8e7ec01-a-62cb3a1a-s-sites.googlegroups.com/site/vanyfiles/1-horz.jpg

我的 html 代码:

<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>

我的CSS代码:

#thumb_news{
   padding: 5px;
}

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

Answer 1

你必须尝试为你的图像制作另一个包装器，并定义一些你想要的宽度和高度，:)并且不要忘记 img 没有 height=100% :D 删除它

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{
显示: block ；
宽度:100px；
高度:100px；
溢出:隐藏；
}

检查这个http://jsfiddle.net/a9un9hari/svbSG/