如何让图像出现在页面上的固定位置答案

【问题标题】：How to have an image appear in a fixed position on the page如何让图像出现在页面上的固定位置
【发布时间】：2013-08-08 14:17:04
【问题描述】：

希望图像文件出现在页面的固定位置。

写了如下代码：

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

但是，图像会随着窗口大小的调整而变长并改变比例。有没有更好的方法让图像显示在固定位置并随着窗口大小调整而缩放而不失真？

【问题讨论】：

更新了你的标签，记得使用 twitter-bootstrap-3
你的 CSS 中有一个错误：width 10%; 应该是 width: 10%;，这可能是你的问题，因为你没有给这个 img 提供宽度。

标签： css html twitter-bootstrap-3

【解决方案1】：

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

此外，您可以使用max-width 或max-height 指定您希望图像具有的最大尺寸（并使用min-width / min-height 指定最小尺寸）

【讨论】：

【解决方案2】：

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

以此为参考。

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

【讨论】：

【解决方案3】：

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

img {
max-width:100%;
}

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

【讨论】：