html - 如何将肖像更改/裁剪为表格中的横向图像？

Question

我是网络编程的新手，所以设置宽度没有问题，但是上传纵向图像时看起来很烦人，我希望所有图像都是横向的。这就是我想要的：https ://d8e7ec01-a-62cb3a1a-s-sites.googlegroups.com/site/vanyfiles/1-horz.jpg

CSS：

#thumb_news{
    padding:5px;
}
#thumb_img{
    width:25%;
    left:0;
    right:0;
    padding-top:5px;
    padding-right:5px;
    padding-bottom:5px;
}

和html代码：

<table>
  <tr>
    <td id="thumb_img"><img src="images/e-magz.png" width="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>

Answer 1

为 img 元素创建包装器。设置 CSS 表单包装器：

.img_wrapper {
   height: 100px;
   overflow: hidden;
   ...
}

这肯定会削减图像的其余部分，并且不会压迫图像。

如果您还想将图像垂直居中设置负上边距，例如，如果图像包装器为 100px 并且图像的设置比设置为 200px：

.img_wrapper img {
   margin-top: -50px; // (200 - 100) / 2
   ...
   // or you can use
   position: relative;
   top: -50px;
   ...
}

但是您必须为此使用 JS 来计算负上边距。我想知道在没有 JS 的情况下是否有一些解决方案。

Answer 2

给你的 thumb_img 元素一个固定的高度，并且overflow:hidden像这样：

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