Question

嘿伙计们，我正试图让图像贴在我网站的底部。我可以让它坚持到底部然后它伸展......这是我的代码：

<style>
    img {
      position: fixed;
      bottom: 0;
    }
</style>
<img src="fire.jpg" width="100%" height="100%" />

而不是很好地坚持我的网页底部并改变尺寸，因为网页改变了它的大小，它只是延伸。所有其他Stack Overflow提示也是如此。任何帮助表示赞赏。

Answer 1

我认为你所追求的是：

<style>
.background-img {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-image: url(/images/fire.jpg);
    background-size: cover; /* or "contain" */
    background-position: center bottom;
}
</style>

<body>
    <div class="background-img"></div>
    <div class="content">
        ...
    </div>
</body>

很难让图像按照您要求的方式进行，而不会出现扭曲或不必要的垂直高度问题。

Answer 2

试试这个！

＆＃13;

div {
background: #F3F3F4 url("http://2.bp.blogspot.com/-CC6No3LtfEY/T6PQLbfzNBI/AAAAAAAAMhI/E7mlV7hya4M/s1600/google.jpg") no-repeat bottom;
height: 100%;
width: 100%;
bottom: 0px;
left: 0px;
position: fixed;
   
}

＆＃13;

<div></div>

＆＃13;

Answer 3

如果您跳过宽度和高度，图像将使用其默认大小并粘在底部。

Answer 4

首先删除width标记的height和img属性。然后添加到您的img css max-width: 100%，这将使您的图像响应，并适应屏幕尺寸。

无需拉伸即可将JPG图像粘贴到网页底部

4 个答案: