Как пропорционально масштабировать изображение в ячейке таблицы фиксированного размера

У меня есть ячейка таблицы фиксированной высоты и ширины. В нем у меня есть изображение, которое может различаться по размеру и соотношению размеров.

Я хотел бы, чтобы изображение было выровнено по горизонтали и вертикали в ячейке таблицы. Также изображение должно быть уменьшено пропорционально размеру ячейки таблицы.

Это часть шаблона электронной почты, поэтому у меня нет современной поддержки CSS, поэтому я не могу, например, использовать CSS, связанный с фоном. Меня волнует все, кроме Lotus Notes. Вы можете увидеть полный список поддерживаемых свойств CSS для электронных писем здесь: www.campaignmonitor.com/css. Кроме того, очевидно, нет Javascript.

Любая помощь будет принята с благодарностью.


css html-table html-email
person Matt Vagni    schedule 22.10.2013    source источник
comment
Вы говорите, что у вас есть таблица и ячейки... Но я вижу только пробел :‹   -  person usernolongerregistered    schedule 22.10.2013
comment
Я вижу на сайте гораздо больше, чем пустое пространство. Но нет стола!   -  person Mr Lister    schedule 22.10.2013
comment
@MrLister Этот список был просто для просмотра списка свойств CSS, а не там, где я пытаюсь это сделать. Это для шаблона электронной почты.   -  person Matt Vagni    schedule 22.10.2013

Ответы (3)


arrow_upward
15
arrow_downward

Вы можете сделать HTML следующим образом

<table>
    <tr>
    <td style="width:250px; height:250px; background-color:red;text-align:center; vertical-align:middle">
    <img src="http://www.100marks.in/wp-content/uploads/2012/07/Sachin-Tendulkar-Pictures-Latest-2.jpg"  style="max-height:100%; max-width:100%"/>   

    </td>   

    </tr>


</table>

Если max-width и max-height не поддерживаются Outlook, вы можете указать width:auto и height:auto Обратитесь к этому http://jsfiddle.net/yJUH4/ 4/

http://jsfiddle.net/yJUH4/2/ [старый]

person Dinesh Kanivu    schedule 22.10.2013
comment
@Matt Vagni это хорошо - person Dinesh Kanivu; 22.10.2013
comment
max-width и max-height не поддерживаются Outlook, поэтому я не могу их использовать. - person Matt Vagni; 22.10.2013
comment
@Matt Vagni Вместо max-width:100% вы можете указать width:autojsfiddle.net/yJUH4/4 Я редактирую свой отвечать - person Dinesh Kanivu; 22.10.2013
comment
Уменьшите размер ячейки таблицы, чтобы он был меньше изображения — вы увидите, что в этом случае это не работает: jsfiddle. сеть/yJUH4/6 - person Matt Vagni; 22.10.2013
comment
max-width: 100% в теге img помогло - person Bronek; 29.04.2020

arrow_upward
1
arrow_downward

Вам нужно применить эти атрибуты к ячейке таблицы и присвоить изображению фиксированный размер, ширину или высоту. Он будет масштабироваться автоматически.

<td valign="middle" align="center">
     <img src="..." width="100" />
</td>
person Diodeus - James MacFarlane    schedule 22.10.2013
comment
Я не могу этого сделать, потому что не знаю, является ли ширина или высота предельным размером. Изображения динамические, и у меня нет этой информации. - person Matt Vagni; 22.10.2013
comment
Тогда вы не сможете сделать то, о чем просите. HTML/CSS не может определять размер изображений. - person Diodeus - James MacFarlane; 22.10.2013

arrow_upward
1
arrow_downward

Некоторые эксперименты с Outlook 2013 показывают, что если изображение отображается за пределами таблицы, Outlook по умолчанию уменьшает его ширину до ширины окна. Так что, если вы можете сделать это без таблицы, по крайней мере, вы не получите горизонтальную полосу прокрутки в Outlook.

(Все остальные почтовые клиенты поддерживают max-width и max-height, согласно вашему списку, так что это не будет проблемой ни в одном из этих других.)

Реальное решение, однако, если вы заранее знаете, какой высоты и ширины будут ячейки таблицы, это изменить размер изображений на стороне сервера перед их отправкой. Это не только решит проблему, но и сэкономит трафик.

Если изменение размера самих изображений по какой-либо причине невозможно, альтернативой является вычисление (на стороне сервера) того, какими должны быть размеры, и включение их в HTML.

Как это сделать, зависит от того, какую систему шаблонов вы используете; к сожалению, вы ничего не упомянули об этом...

person Mr Lister    schedule 23.10.2013