Как настроить размер изображения под высоту строки в таблице html - PullRequest
Новая
       48

Как настроить размер изображения под высоту строки в таблице html

0 голосов
/ 20 июня 2020

Я пытаюсь создать надежную подпись html для использования в Thunderbird. Под надежным я имею в виду, что он должен правильно выглядеть не только в Thunderbird, но и в других почтовых клиентах, на которые я отправляю почту. Я тестирую это, например, с Gmail.

Макет довольно прост, он примерно такой:

С уважением

| Пиека Гроббелаар

| 082 111 0000

<ППППППП> | pieka@mycompany.co.za

«ППС» - это картинка (компания lo go). Итак, я хочу добиться этого макета, используя таблицу с 1 строкой и 2 столбцами и поместив изображение в первую ячейку, а текст - во вторую.

Теперь я могу установить размер изображения в пикселях , но это проблема c, потому что разные почтовые клиенты по-разному обрабатывают размер шрифта (это может быть из-за того, как Thunderbird упаковывает почту перед отправкой - кто знает?). Но я хочу, чтобы высота lo go совпадала с высотой трех строк рядом с ним.

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

итак, это базовый c кадр (я думаю): 


<table>
 <tr >
  <td >
   <p ><img  src ="data:image/png;base64,iVBORw0...."></p>
  </td>
  <td >
   <p >Pieka Grobbelaar</p>
   <p >082 111 0000 </p>
   <p >pieka@mycompany.co.za</p>
  </td>
 </tr>
</table>

Что я должен добавить, чтобы получить желаемое поведение?

1 Ответ

1 голос
/ 20 июня 2020

Classi c способ: чтобы изображение не учитывалось при расчете размера, вам нужно вынуть его из потока через position:absolute;.

, чтобы изменить размер до height строки , сделайте родительский элемент td в position:relative;, чтобы он стал ссылкой. height:100% в основном будет с чего начать.

table-layout:fixed и width на table, и только один td завершит sh настройку. em - это значение, которое легче подобрать для соответствия средней максимальной длине текста.

Вот возможный пример, демонстрирующий идею. Следует понимать встроенный стиль 

<table style="table-layout:fixed;width: 20em;border:solid;margin:auto">
  <tr>
    <td style="position:relative;width:40%">
      <p>
        <img style="position:absolute;max-width:100%;max-height:100%;top:0;" src="https://dummyimage.com/400">
        <!-- demo img is a 1:1 ratio you need to tune table and td widthS -->
      </p>
    </td>
    <td>
      <p>Pieka Grobbelaar</p>
      <p>082 111 0000 </p>
      <p>pieka@mycompany.co.za</p>
    </td>
  </tr>
</table>
<hr>
<table style="table-layout:fixed;width: 20em;border:solid;margin:auto">
  <tr>
    <td style="position:relative;width:40%">
      <p>
        <img style="position:absolute;max-width:100%;max-height:100%;top:0;" src="https://dummyimage.com/300x400">
        <!-- demo img is a 1:33 ratio you need to tune table and td widthS -->
      </p>
    </td>
    <td>
      <p>Pieka Grobbelaar</p>
      <p>082 111 0000 </p>
      <p>CSS Land</p>
      <p>pieka@mycompany.co.za</p>
    </td>
  </tr>
</table>

надеюсь, что эти подсказки сработают для вас.

...