Question

我需要在html页面中放置一个图像，当浏览器边框发生变化时，该图像会调整大小并保持纵横比。像这样的东西： enter image description here

我试过了：

<html>
    <head>
        <title>Test Resize</title>
    </head>

    <body>
        <div style = "width: 100%;"><img src = "zast.jpg" style = "width: 100%;"></div>
    </body>
</html>

但是当宽度仅改变时图像会调整大小，如果我改变窗口的高度，则只会出现滚动如果我为两个标签添加高度：100％，则图像会在不保持纵横比的情况下调整大小。我能做些什么来实现我的需要？
我正在寻找一些非常简单的方法，比如两个三个标签。但如果没有这样的话，我会很高兴做任何事情。

它可能不是img标签。我可以使用任何东西（例如div或table或td的背景）

Answer 1

这是关于你问什么的很好的资源。

http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

如何轻松制作可调整大小的图像以保持纵横比调整大小？

1 个答案: