Question

希望图像文件显示在页面上的固定位置。

写下以下代码：

<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>

但是，当窗口调整大小时，图像会显得比较长并会改变比例。有没有更好的方法让图像显示在固定的位置和缩放，因为窗口调整大小而不会扭曲？

Answer 1

您的图像会更改比例，因为您会根据窗口大小设置宽度和高度。仅设置宽度（或仅设置高度）。

此外，您可以使用max-width或max-height指定图片所需的最大尺寸（并min-width / min-height指定最小尺寸）< / p>

Answer 2

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

以此为参考。

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

Answer 3

如果您想根据窗口使用重新调整图像大小：

img {
max-width:100%;
}

如果您不想重新调整图像大小，请在px中给出宽度。

如何让图像显示在页面上的固定位置

3 个答案: