1

想让图像文件出现在页面的固定位置。

编写了以下代码:

<style>
.hovering-image{
    position: fixed;
    left: 70%;
    top:20%;
    height: 20%;
    width 10%;
}

</style>

<body>

    <div class="hovering-image">
        <img src="whatever.jpg">
    </div>

</body>

但是,图像会随着窗口大小的调整而变长并改变比例。有没有更好的方法让图像显示在固定位置并随着窗口调整大小而不扭曲?

4

3 回答 3

1

您的图像会更改比例,因为您根据窗口大小设置了宽度和高度。仅设置宽度(或仅设置高度)。

此外,您可以使用max-widthmax-height指定您希望图像具有的最大尺寸(和min-width/min-height指定最小尺寸)

于 2013-08-07T09:22:26.930 回答
0

尝试只给出左边距和右边距。提供所有参数会导致图像失真。

以此为参考。

http://www.ehow.com/how_12064024_overlay-image-fixed-position-website.html

于 2013-08-07T09:35:30.393 回答
0

如果要根据窗口重新调整图像大小,请使用:

img {
max-width:100%;
}

如果您不想重新调整图像大小,请以 px 为单位给出宽度。

于 2013-08-07T11:27:02.547 回答