如何计算网站文章中浮动图像的宽度？
目前，我使用 style='width:...%' 调整文章中的图像大小，如果我们讨论常见的页面宽度（500-800px），那就相当不错了。但如果我们有一个超宽的布局（可能是一个流动的布局），那么这种方法就不太好了。
如果我们有一个超宽的页面，图像会变得更大并且需要更多的垂直空间，而文章的文本由更少的行组成，因此文本占用更少的垂直空间。这导致文章的布局很丑陋。
我应该使用什么方法来计算宽度？
Currently I resize the images in articles using style='width:...%', and it's pretty good if we're talking about common pagewidths (500-800px). But if we have an extra wide layout (it might be a fluid one), then this method isn't so good.
If we have an extra wide page, the images get bigger and need more vertical space, while the the text of the article consists of fewer lines so the text takes up less vertical space. This leads to an ugly layout of the article.
What method should I use to calculate the widths?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以使用“max-width”和/或“max-height”CSS属性，使图像保持合理的大小，同时保持比例不变（设置两者不会改变比例）。它们的使用方式类似于“宽度”和“高度”CSS 样式。
此外，您仍然可以显式设置宽度（以百分比或绝对形式），并且如果需要，最大高度/宽度仍将优先
You can make use of the "max-width" and/or "max-height" css properties so the images are kept in reasonable size while keeping the ratio intact (setting both will NOT change the ratio). They are used like the "width" and "height" css styles.
Moreover, you can still set the width explicitly (in percentage or absolute) and the max-height/width will still take precedence if needed
仅设置宽度，按比例增加或减少图像的大小（即图像的高度和宽度都按比例增加），因此如果您在 css 中明确提及高度，那么您将获得正确的高度（垂直空间）。
style="width:...%;height:...%"
另外，我同意@idanzalz的答案 - 对于不同的设备，布局不同，根据设备使用 max-width 和 max-height css 属性。 ..
Setting only the width, increases or decreases the size of image in ratio (i.e. both height and width of the image increases in a ratio), so if you will explicitly mention the height in your css, then you would get the proper height (vertical space).
style="width:...%;height:...%"
Also, I agree with @idanzalz's answer - for different devices, where the layouts are different, use max-width and max-height css properties depending on device...