背景图像自动调整表格中的大小

时间:2011-03-01 11:15:42

标签: javascript jquery css

您好 我正在建立一封新闻信现在这封信现在要求的是将背景图像传达给某些TD 现在我需要调整图像大小,因为他们的父TD调整大小,即如果表宽度设置为50%或500或任何其他值我需要背景图像调整大小以适应新的宽度任何想法:) 谢谢

1 个答案:

答案 0 :(得分:2)

使用CSS3,您可以使用background-size属性调整背景大小:

在最新的浏览器中,将它添加到CSS会将背景拉伸到100%宽度和100%高度。

td {background-size: 100% 100%;}

然而,这可能会使图像偏斜,因此您可能更喜欢仅使用background-size: 100%;将宽度设置为100%,将高度设置为自动。

要支持略微较旧的浏览器,您需要使用供应商前缀,如下所示:

-moz-background-size: 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100%; /* Opera 9.5 */
-webkit-background-size: 100%; /* Safari 3.0 */
-khtml-background-size: 100%; /* Konqueror 3.5.4 */
-moz-border-image: url(mtn.jpg) 0; /* Gecko 1.9.1 (Firefox 3.5) */

以上示例is from this site,完整规范就在这里 - http://www.w3.org/TR/css3-background/#the-background-size