2

我的网页中有这些图像，当视口宽度减小时，我想自动缩小这些图像。我正在使用以下 CSS 来执行此操作：

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: auto;
}

我要调整大小的图像有两种类型：

  1. 在里面td的那些table
  2. 不在 a 内的table

在 Chrome 上，当视口宽度减小时，两种类型的图像都会自动缩小。然而，至少在 Firefox 和 Internet Explorer 上，这种缩小只发生在第二种类型，而不是第一种类型（出现滚动条）。

JSFiddle：http: //jsfiddle.net/ahmadka/raSSq/2/

请注意，包含图像的小单元格在 Firefox/IE 中不会调整大小，但底部的横幅会调整大小。

有人能弄清楚问题是什么吗？

4

1 回答 1

2

几件事：

  1. 宽度：自动；将倾向于使图像使用其实际宽度，而不是拉伸以适应更大的区域。你应该使用 width:100%;

  2. 将图像设置为使用 100% 的可用区域后，您还需要通过 width:100% 将表格设置为使用 100% 的可用区域；

结果：

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: 100%;
}
.imageTable table {
    width:100%;
}

这似乎对我来说是一个基本的解决方案：http: //jsfiddle.net/5AYWd/1/

此外，如果您希望图像在某个点停止增长，那就是您使用最大宽度的时候。您可能还想在表格上设置最大宽度。

像这样的东西。

于 2013-07-14T16:50:13.847 回答