Как поменять / обрезать портрет, чтобы он был пейзажным изображением в таблице?

Question

Как поменять / обрезать портрет, чтобы он был пейзажным изображением в таблице?

0

Я новичок в веб-программировании, поэтому для настройки ширины нет проблем, но при загрузке портретного изображения это выглядит раздражающим, и я хочу, чтобы все изображения были ландшафтными. Это то, что я хочу: 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 version  of Lorem Ipsum. Proin gravida nibh</a>
    </td>
  </tr>
</table>

vanio178 11 нояб. 2013, в 04:22

Источник

Теги:

html

css

html5

css3

2 ответа

Ещё вопросы

quarky · Answer 1 · 2013-11-12T18-24-00.000Z

Создайте обертку для элемента 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.

GluePear · Answer 2 · 2013-11-11T00-46-00.000Z

Дайте элементу 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;
}

спасибо, но это делает образ угнетенным. d8e7ec01-a-62cb3a1a-s-sites.googlegroups.com/site/vanyfiles/… у вас есть другая идея, чтобы избежать угнетенного изображения?