设置浏览器调整大小时的比例图像宽度
如果我有一个与样式组合的图像：
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
图像将大小调整为包含它的框宽度的 50%，并垂直调整大小，保持纵横比。
这似乎需要将封闭的 DIV 设置为特定的宽度和高度值。 但是，如果您希望封闭的 DIV 在浏览器被拖动变小或变大时自动调整大小，这不是一个问题吗？
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我已经澄清了我对您的回答 原始问题。 去看一下，看看是否能解决问题。 或多或少，如果您希望图像随窗口调整大小，您不能将DIV 设置为固定的宽度和高度。 DIV 还必须具有百分比宽度和高度。
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
您需要手动指定
width和height属性以使图像保持其尺寸。 如果您使用服务器端编码 (PHP/ASP)，这不会太困难。另一种方法是使用 JavaScript 动态计算图像并调整图像大小。
You'll need to manually specify the
widthandheightproperties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
不，图像仍然占 div 的 50%，如果 div 占页面的一定比例，那也没关系。
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
它的所有比例：封闭的 div 可能是整个窗口的 2/3，而图像将占整个窗口的 1/2。 这一切都是在显示之前计算出来的，只是一堆数字运算。 ;D
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D