Question

我在<td>中有<table>，其中有一张图片。使用 ctrl +鼠标滚轮重新调整屏幕大小时，必须水平放大图像以适合屏幕。我不应该使用 background:repeat-x属性和宽度应为15％;如果我重新调整大小，它应该水平放大。

HTML：

<td id="rightBanner">

的CSS：

#rightBanner{
    background-image:url('../images/rightbanner.png');
    width:15%;
    height:95px;
    align:right;
}

三江源。

Answer 1

试

<强> HTML：

<td id="rightBanner">

<强> CSS：

#rightBanner{
   background-image:url('../images/rightbanner.png') repeat-x;
   width:15%;
   height:95px;
   align:right;
}

Answer 2

使用background-size：cover或100％：

css: #rightBanner{
   background-image:url('../images/rightbanner.png');
   background-size: 100%;
   width:15%;
   height:95px;
   align:right;
}

background-size: [horizontal percentage] [vertical percentage]

如果您不包含垂直百分比，那么这将相应地按水平百分比计算。

Answer 3

如果您不想使用repeat-x。您可以在html中缩放图像（虽然不是一个好的解决方案）。

请分享一个页面样本以便更好地理解。

Answer 4

尝试：

#rightBanner{
    background-image:url('../images/rightbanner.png');
    width:15%;
    height:auto;
    align:right;
}

使用高度：自动，您的图片会调整大小而不会失去它的质量。

Answer 5

你可以这样做：

在容器表上设置宽度，
在td
为图片设置“background-size：100％100％”

以下是代码：

<强> CSS：

#container-table{
    width:100%;
}

#rightBanner{
   display:block;
   background-image:url('../images/rightbanner.png');
   background-size: 100% 100%;
   width:15%;
   height:95px;
}

<强> HTML：

<table id="container-table">
    <tr>
        <td id="rightBanner"></td>
    </tr>
</table>

Here是一个有效的例子。希望这会有所帮助。

如何在css中水平放大图像？

5 个答案: