Rowspan изображения переменной высоты, поэтому текст всегда равномерно - PullRequest
Новая
       32

Rowspan изображения переменной высоты, поэтому текст всегда равномерно

0 голосов
/ 22 октября 2018

Я создаю страницу отображения для библиотеки фотографий.Страница будет иметь 4 атрибута фотографии - Имя файла, Название, Дата съемки и Имя фотографа, а также предварительный просмотр самой фотографии.Я пытаюсь добиться единообразного вида, но, к сожалению, изображения бывают как в альбомной, так и в портретной ориентации, поэтому, хотя ландшафтные изображения выглядят единообразно, портретные изображения растягивают расстояние между строками атрибутов и поэтому портят внешний вид.

Мой пример кода ниже, код на JSFiddle находится здесь - https://jsfiddle.net/tsmolskow/37hkszbq/61/

HTML-код: 

<style>

.right-Padding{
   padding-right: 10px; 
}
img.resize {
   width: 50%;
   height: 50%;
   max-height: 125px;
}

</style>
<table style='font-size:15px'>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='5'><a href='" + href + "'><img class='resize' align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Title</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

<tr><td font-size='40px'>Image Name</td>
<td rowspan='6'><a href='" + href + "'><img class='resize' align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' class="right-Padding">Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td class="right-Padding">Image Taken By</td></tr>
<tr><td height='100%'></td></tr>

</table>

Код CSS: 

.right-Padding{
 padding-right: 10px; 
}
img.resize {
    width: 50%;
    height: 50%;
    max-height: 125px;
}

1 Ответ

0 голосов
/ 22 октября 2018

Во-первых, ваше первое изображение имеет размер строки 6, должно быть 4. Установите максимальную высоту для ваших изображений, я установил его на 90 пикселей.Затем удалите 25% декларации ширины и высоты из ячеек <td> с изображениями.Наконец, вы должны использовать таблицы?Если вам нужен табличный макет, вы действительно должны использовать CSS Grid. 

table{
   width:100%;
}
td{
   border:solid 1px #000;
}
img{
   max-height:90px;
   
}
<table style='font-size:15px'>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
    <td rowspan='4'>
      <a href='" + href + "'>
        <img  align='middle' src='https://p1.liveauctioneers.com/3283/129454/65998802_1_x.jpg?version=1540061833&format=pjpg&auto=webp&quality=50'>
      </a>
    </td>
  </tr>
  <tr>
    <td width='50%' style='padding-right: 10px;'>Image Tile</td>
  </tr>
  <tr>
    <td>Image Date Taken</td>
  </tr>
  <tr>
    <td style='padding-right: 10px;'>Image Taken By</td>
  </tr>
  <tr>
    <td font-size='40px'>
      <a href='" + href + "'>Image Name</a>
    </td>
<td rowspan='6'><a href='" + href + "'><img  align='middle' src='https://i.pinimg.com/474x/09/f6/83/09f683f4fde5a1e70c785ad1dedca58b--silver-belt-buckles-silver-belts.jpg'></a></td></tr>
<tr><td width='50%' style='padding-right: 10px;'>Image Tile</td></tr>
<tr><td>Image Date Taken</td></tr>
<tr><td style='padding-right: 10px;'>Image Taken By</td></tr>

</table>
...