Фон изображения растянуть всю ячейку таблицы

Что делать, если я хочу, чтобы изображение растягивалось точно по размеру ячейки таблицы?

У меня была таблица с 1 строкой и 3 столбцами. В каждом столбце по 1 изображению. Я попытался указать свойства width=33%, height=auto, но изображение все равно искажается.

1
0
182
2

Ответы 2

Вы можете добиться этого с помощью css.

td table {
    background: url(path/to/background.png);
    background-size: contain;
} 

привет Хемант, есть ли шанс добиться модификации в html / * .aspx?

edisonl 10.09.2018 10:45

Привет, пример примера может помочь вам для ячейки таблицы .. <html> <head> </head> <style> #mydiv img {width: 100%; высота: 100%; } </style> <body> <table id = "mydiv" border = "1" width = "100%"> <tr> <td width = "33%"> <img src = "C: \ Users \ hemant" .kothari \ Desktop \ hems.jpg "> </td> <td> </td> <td> </td> </tr> </table> </body> </html>

user10340688 10.09.2018 11:46

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

см. пример ниже:

HTML:

<h2>
Test
</h2>

<table class="tab">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

CSS:

.tab{
  border : 1px solid red;
}

.tab td
{
  color: red;
  font-size: 30px;
  font-weight: bold;
  text-align: center;

  width:200px;
  height:200px;
  background-image: url('https://static.fnac-static.com/multimedia/Images/FR/NR/8a/c9/89/9030026/1540-1/tsp20171113114257/Figurine-Pixel-Pals-Light-Up-Capcom-Street-Fighter-Ryu.jpg');
   background-position: center; 
   background-size: contain;
}

Привет, Марко, я попробовал код ниже в html: <body> <table class = "tab"> <tr> <td> & nbsp </td> <td> <a class="active" href="#home"> Главная </a> </td> <td> <a class="active" href="#BUSINESS"> О НАС </a> </td> <td> <a class = "active" href = "# ПРОДУКТЫ "> НАШИ ПРОДУКТЫ & amp; УСЛУГИ </a> </td> <td> <a class="active" href="#CONTACT"> СВЯЗАТЬСЯ С НАМИ </a> </td> </tr> </table> </body>

edisonl 12.09.2018 05:18

изображение может быть отображено

edisonl 22.10.2018 08:07

Другие вопросы по теме