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

将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;
}

Answer 2

为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，是否有一些解决方案。

如何更改/裁剪肖像作为表中的横向图像？

2 个答案: