Css 如何使图像显示在页面上的固定位置_Css_Html_Twitter Bootstrap 3

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

css html twitter-bootstrap-3

Css 如何使图像显示在页面上的固定位置,css,html,twitter-bootstrap-3,Css,Html,Twitter Bootstrap 3,希望图像文件显示在页面上的固定位置编写了以下代码： <style> .hovering-image{ position: fixed; left: 70%; top:20%; height: 20%; width 10%; } </style> <body> <div class="hovering-image"> <img src="whatever.jpg">

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

编写了以下代码：

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


.悬停图像{
位置：固定；
左：70%；
最高：20%；
身高：20%；
宽度10%；
}

但是，随着窗口大小的调整，图像显示为拉长并改变比例。当窗口调整大小时，是否有更好的方法使图像以固定的位置和比例显示而不失真？

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

此外，您还可以使用

max width

或

max height

来指定图像的最大尺寸（以及

min width

min height

来指定最小尺寸）

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

此外，您还可以使用

max width

或

max height

来指定您希望图像具有的最大尺寸（以及

min width

min height

来指定最小尺寸）

尝试只提供左右边距。给定所有参数会导致图像扭曲

以此为参考

试着只给出左右边距。给定所有参数会导致图像扭曲

以此为参考

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

img {
max-width:100%;
}

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

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

img {
max-width:100%;
}

如果您不想重新调整图像的大小，请以px表示宽度。

更新了标记，请记住使用twitter-bootstrap-3如果CSS中出现错误：

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