web-dev-qa-db-ja.com

tdに収まるように画像を拡大する

Tdセルの画像を引き伸ばしたい。どうやってするか。これは、この| ________ |を反転したように見えるタブ画像です。この画像の中央に「aaa」というテキストが含まれる最初のtdセルに画像を配置する必要があります。

htmlimagehtml-table
9
nir

CSS3を使用せずに背景画像を拡大することはできません。

CSS3にはbackground-size 100％を指定して、画像をコンテナの100％に拡大できるプロパティ。ただし、CSS3はすべてのブラウザでサポートされているわけではありません。

これを実現するには、画像タグを使用し、幅と高さを100％にすることができます。

8
rahul

本当に画像を引き伸ばしたい場合は、width = "100％"にして、高さを画像の実際の高さと同じに設定します。

しかし、実際には、引き戸の手法を使用する必要があります http://www.alistapart.com/articles/slidingdoors/ cssの背景画像といくつかの追加のマークアップを使用します。

AaaをSPANでラップし、引き戸の記事のLIとAの代わりにTDとSPANの両方を使用することをお勧めします

<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>

何が起こっているのかというと、タブ画像を3つの部分にカットします。左のカーブを含む左。中央には曲線のないタブの一部から取られた縦縞が含まれ、右側には右側の曲線が含まれています。

0
Ankur