1

设置宽度没有问题，但是在上传肖像图像时它看起来很烦人，我希望所有图像都具有相同的宽度和高度，但保持图像看起来不错（没有拉伸/压迫）。也许像时间轴中的 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;
}
4

2 回答 2

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{ display:block; width:100px; height:100px; overflow: hidden; }

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

于 2013-11-11T05:02:06.017 回答
0

编辑

如果您使用的是 DIV 但不适用于表格，以下信息会很有帮助

您的标签中有width="100%并height="100%内联。<img>这迫使图像成为包含的宽度和高度div，但这不是你想要的。

试着只留下宽度，你可以把它放到你的 CSS 中，例如：

.thumb_img img {
  width: 100%;
}

高度会自行解决。您已经溢出：隐藏在 DIV 上。

请注意，我使用的是.thumb_imgnot #thumb_img- 那是<td CLASS="thumb_img">not <td ID="thumb_img">。如果你在做拇指，那么你可能做的不止一个。并且CSS ID 只能用于页面上的一个元素。

餐桌用

根据Stack Overflow 上的这个答案，您需要在表格和table-layout: fixedTABLE 元素上设置宽度，才能使其正常工作。

如果可能的话，我建议在这种情况下使用 DIV，因为它们更适合各种布局需求。

于 2013-11-11T04:54:41.673 回答