it-swarm.com.ru

Растянуть изображение, чтобы вписаться в тд

Я хочу растянуть изображение в моей камере. Как это сделать. Это изображение вкладки, которое выглядит перевернутым из этого | ________ |. Мне нужно поместить изображение в первую ячейку td, которая содержит текст 'aaa', который будет находиться в центре этого изображения.

9
nir

Вы не можете растянуть фоновое изображение без использования CSS3.

В CSS3 у вас есть размер фона свойство, для которого можно дать 100% растянуть изображение до 100% контейнера. Но CSS3 поддерживается не во всех браузерах.

Вы можете использовать тег изображения и задать ширину и высоту до 100% для достижения этой цели.

8
rahul

Если вы действительно хотите растянуть свое изображение, просто сделайте width = "100%" и установите высоту, равную фактической высоте вашего изображения.

Но на самом деле вы должны использовать технику раздвижных дверей http://www.alistapart.com/articles/slidingdoors/ с фоновыми изображениями css и некоторой дополнительной разметкой;

Я бы посоветовал обернуть ваш aaa в SPAN и использовать TD и ​​SPAN вместо LI и A в статье о раздвижных дверях.

<td style="background: transparent url('images/tab-left.gif') left top no-repeat">
    <span style="background: transparent url('images/tab-right.gif') right top no-repeat; margin-left: 10px">aaa</style>
</td>
2
Matt Smith

Если таблица имеет фиксированный размер, и вы знаете размер изображения, вы можете применить изображение с помощью CSS.

td.tab {
  background: url(images/tab.jpg) no-repeat;
  height: 50px;
  width: 200px;
}
1
peirix

Обычно вы делаете это как фоновое изображение, особенно если у вас есть изогнутые края.

Ваш HTML может выглядеть примерно так:

<ul class="tabs">
    <li><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
</ul>

и CSS:

<style type="text/css" media="screen">
    .tabs, .tabs li {
        margin:0; padding:0;
        list-style-type:none;
    }
    .tabs li {
        background:url(tab.gif) no-repeat left top;
        padding-left:5px;
        float:left;
        width:100px;
    }
    .tabs li a {
        background:url(tab.gif) no-repeat right top;
        padding-right:5px;
        display:block;
        text-align:center;
    }
</style>
0
Makram Saleh

Старый способ сделать это с помощью ячеек таблицы такой:.

<table>
  <tr>
    <td image="tab-left.gif" width="12" height="32"></td>
    <td background="tab-middle.gif" height="32"> --- your tab's text goes here --- </td>
    <td image="tab-right.gif" width="12" height="32"></td>
  </tr>
</table>

Происходит то, что вы разрезаете изображение вкладки на три части. Левый, который включает в себя левую кривую. Середина, которая включает в себя вертикальную полосу, взятую из некоторой части вкладки, на которой нет кривой, и правая, которая включает правую кривую.

0
Ankur