Html 拉伸图像以适应 td
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1176094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Stretch image to fit in td
提问by
I want to stretch an image in my td cell. How to do that. Its is a tab image which looks like inverted of this |________|. I need to place the image in the first td cell which contains the text 'aaa' will come in center of this image.
我想在我的 td 单元格中拉伸图像。怎么做。它是一个标签图像，看起来像这个 |________| 的倒置。我需要将图像放在第一个 td 单元格中，其中包含文本“aaa”将出现在该图像的中心。
回答by rahul
You cannot stretch a background image without using CSS3.
不使用 CSS3 就无法拉伸背景图像。
In CSS3you have background-sizeproperty for which you can give 100% to stretch the image to 100% of the container. But CSS3 isn't supported in all browsers.
在CSS3 中，你有background-size属性，你可以给它 100% 将图像拉伸到容器的 100%。但并非所有浏览器都支持 CSS3。
You can use an image tag and give the width and height to 100% to achieve this.
您可以使用图像标签并将宽度和高度设置为 100% 来实现此目的。
回答by Matt Smith
If you really want to stretch your image just make the width="100%" and set height equal to the actual height of your image.
如果您真的想拉伸图像，只需将 width="100%" 设置为等于图像的实际高度即可。
But really you should be using a sliding doors technique http://www.alistapart.com/articles/slidingdoors/with css background images and some extra markup;
但实际上，您应该使用带有 css 背景图像和一些额外标记的推拉门技术http://www.alistapart.com/articles/slidingdoors/；
I'd suggest wrapping your aaa in a SPAN and using both the TD and SPAN in place of the LI and A in the sliding doors article
我建议将您的 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>
回答by peirix
If the table is fixed size, and you know the size of the image, you can apply the image using CSS.
如果表格是固定大小的，并且您知道图像的大小，则可以使用 CSS 应用图像。
td.tab {
background: url(images/tab.jpg) no-repeat;
height: 50px;
width: 200px;
}
回答by Ankur
The old school way to do it using table cells is like this.
使用表格单元格的老派方法是这样的。
<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>
What is happening is that you cut your tab image into three parts. The left which includes the left curve. The middle which includes a vertical stripe taken from some part of the tab which no curve, and the right which includes the right curve.
发生的事情是您将标签图像切成三部分。包括左侧曲线的左侧。中间包括从没有曲线的标签的某些部分截取的垂直条纹，以及包括正确曲线的右侧。
回答by Makram Saleh
Usually, you do this as a background image, specially when you have curved edges.
通常，您将此作为背景图像，特别是当您有弯曲边缘时。
Your HTML might look something like this:
您的 HTML 可能如下所示：
<ul class="tabs">
<li><a>Tab 1</a></li>
<li><a>Tab 2</a></li>
<li><a>Tab 3</a></li>
</ul>
and the CSS:
和 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>
