Question

我有一个非常酷的网站，允许人们上传图片。有时图像真的很大，如下面的div所示：

Overflow http://img242.imageshack.us/img242/6711/overflowds1.png

我可以添加一种样式添加到我的DIV来解决这个问题吗？

Answer 1

将div上的CSS overflow property设置为以下其中一个：

overflow: auto;    /* Adds scrollbars only when necessary */
overflow: scroll;  /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden;  /* Hides any content that overflows */

Answer 2

您可以使用CSS overflow属性：将其设置为hidden或auto以隐藏内容或在必要时添加滚动条。

Answer 3

一般来说，对于较大的图像，您需要对它们进行缩略图，而不是自动显示它们，特别是如果它们超过一定的大小。

使用高度和宽度CSS属性（或高度和宽度属性）将缩放图像，但它仍然会下载整个图像。如果它的大，那可能是个问题。最好在上传时生成缩略图，然后显示该缩略图，然后允许用户点击该缩略图以显示完整尺寸的图像。

Answer 4

<style>img { max-width: 100% }</style>

这将使浏览器调整图像大小以适合其包含的框。有一些缺点，一个是它显然无法在IE6中工作（可能是7？），如果包含元素有填充，你需要在图像周围使用一个包装来使它适合。

Answer 5

另一个很棒但不完全支持的是将max-width: 400px添加到您的图片中。

Answer 6

你应该做一个基本的宽度和宽度，而不是使用CSS。服务器端的高度检查，如果超过某个阈值，请使用HTML / Javascript调整图像大小。许多网站论坛应用程序都这样做，并且通常允许您单击以展开图像。

然后确保使用Z-LAYER属性确保图像浮动在内容块之上，以便当图像展开时它高于一切。

Answer 7

使用ImageMagick等工具包自动调整每个上传图片的大小。你最终会看到更好看的图像，因为它会重新采样（而不仅仅是调整大小）。

然后，您可以创建漂亮的缩略图，预览和每个图像的其他尺寸，这些尺寸非常适合您的模板设计。

Answer 8

如果您不想一直调整实际图像文件的大小，并希望保持图像的比例，那么您可以询问图像的大小（高度和宽度），然后将它们乘以要求适合你的div。

例如，如果你有一个1024x768的图像，并想把它放在800宽的div中，你知道宽度将是800，高度将是768 x（800/1024）= 600。然后当显示图像，您可以根据需要设置高度和宽度属性。

Answer 9

或者，通过一些小的javascript，您可以检查图像宽度。如果大于Xpx，则缩放为Ypx。当然，在页面完全加载之前，你会有一点“图像轻弹”。

你可以从任何IPB论坛激励自己：）

如何在我的网站上修复CSS，以便大图像不会溢出容器？

9 个答案: