如何计算网站文章中浮动图像的宽度？答案

【问题标题】：How to calculate the width of floated images in an article on a website?如何计算网站文章中浮动图像的宽度？
【发布时间】：2011-11-29 21:13:22
【问题描述】：

目前我使用style='width:...%'调整文章中的图像大小，如果我们谈论常见的页面宽度（500-800px），那就太好了。但是如果我们有一个超宽的布局（它可能是一个流畅的布局），那么这种方法就不是很好了。

如果我们有一个超宽的页面，图像会变得更大，需要更多的垂直空间，而文章的文本由更少的行组成，因此文本占用的垂直空间更少。这导致文章的布局很丑。

我应该使用什么方法来计算宽度？

【问题讨论】：

【解决方案1】：

您可以使用“max-width”和/或“max-height”css 属性，这样图像在保持比例不变的同时保持合理的大小（设置两者都不会改变比例）。它们像“宽度”和“高度”css 样式一样使用。

此外，您仍然可以明确设置宽度（百分比或绝对值），如果需要，最大高度/宽度仍将优先

【讨论】：

【解决方案2】：

仅设置宽度，按比例增加或减少图像的大小（即图像的高度和宽度都按比例增加），因此如果您在 css 中明确提及高度，那么您会得到正确的高度（垂直空间）。

style="width:...%;height:...%"

另外，我同意@idnzalz 的回答 - 对于布局不同的不同设备，请根据设备使用 max-width 和 max-height css 属性...

【讨论】：