Question

我有一张包含图像和文字内容的表格，这些图片的设置宽度使用：

<img src="" width="250">

其中一些图像在运行时使用jQuery动态添加到表中。如果添加了非常大的图像，则表格宽度将大于屏幕尺寸。我在我的CSS中有表width:value of its container。

如何让图像缩小，以便表格永远不会超过像素的宽度？我不想从图像中删除宽度标记。

Answer 1

您可以通过CSS设置：

img{
        width:100%; height:auto;
}

此外，您可以使用表格单元格，而不是使用图像标记。例如：

 <td class="image"></td>

然后为该单元格设置该图像类的样式：

.image {
    background: url(http://i.imgur.com/fWmztPH.jpg);
}

我为你准备了一个小提琴：http://jsfiddle.net/7bbcf2cy/

Answer 2

如果您的图片位于td中

<td>
    <img src="#" width="250">
</td>

在代码中添加css样式（但不要忘记删除带注释的1行）

td img {
    display: block;
    width: 100%; /* if td size is definied, and image must be fullwidth */
    max-width: 250px; /* if you want images not to be larger than 250px */
    height: auto;
}

css使用设置宽度调整图像到表

2 个答案: