將JPG圖像粘貼到網頁的底部而不伸展

嘿，我試圖讓圖像堅持到我的網站的底部。我可以把它粘在底部，但隨後它延伸......這是我的代碼：將JPG圖像粘貼到網頁的底部而不伸展

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

而不是很好堅持我的網頁的底部，並更改尺寸的網頁改變它的大小，它只是延伸。所有其他的堆棧溢出技巧都是一樣的。任何幫助表示讚賞。

來源

2015-02-23 The Man

如果你不想讓它伸展，你爲什麼要寫'width =「100％」height =「100％」？ – vsync 2015-02-23 20:54:28

我想你以後是這樣的：

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

這很難使圖像做你問什麼不失真或不想要的垂直高度的問題。

來源

2015-02-23 20:57:31 isherwood

謝謝！這個竅門！ – 2015-02-23 22:54:56

我一直在使用z-index直到現在在後臺製作這個圖片。我能夠承諾，因爲它現在是一個背景圖片？ – 2015-02-23 22:55:41

我不確定你在問什麼。如果按照我的格式排列HTML，則不應該操作z-index，並且內容元素落後於背景。 – isherwood 2015-02-24 02:46:22

如果您跳過寬度和高度，圖像將使用其默認尺寸並粘在底部。

來源

2015-02-23 20:59:03

試試這個！

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

<div></div>

所有的

來源

2015-02-23 21:00:59 dead1

首先刪除您img標籤的width和height性能。然後添加到您的圖像max-width: 100%，這將使您的圖像響應，並適應屏幕大小。

來源

2015-02-23 21:05:35

將JPG圖像粘貼到網頁的底部而不伸展

回答

相關問題