我希望窗口頂部的圖像的高度爲0px到500px。它將水平佔據整個窗口並始終保持相同的寬高比。當調整窗口大小時，CSS調整圖像大小調整圖像的大小

當窗口大小調整後，圖像底部不會低於500px。圖像將在屏幕的TOP和RIGHT部分調整大一些（以保持相同的寬高比）。因此，x = 0px，y = 500px將是圖像左下角的固定位置。

當窗口水平調整大小時，下面實現了增加圖像大小的正確效果，但是我不希望「bottom：30px;」因爲這應該是關於窗口的頂部。如何才能做到這一點？

<!DOCTYPE html> 
<html> 
<style> 
*{ 
    margin: 0px; 
    padding: 0; 
} 

.img99{ 
    position: absolute; 
    min-width: 500px; 
    width: 100%; 
    bottom: 30px; 
} 

</style> 
<body> 


<img class="img99" src="http://a.gifb.in/022014/1392140403_plane_crashes_while_taking_off_on_a_beach.gif" /> 

</body> 
</html>

Fiddle

來源

2014-09-02 Bzyzz

嘗試應用一些@media查詢CSS – Rab 2014-09-02 19:41:53

變化底部聲明頂：0像素或底部：0像素不會使圖像調整過的頂部：0取決於你正在尋找 – Devin 2014-09-02 20:10:17

頂什麼屏幕。圖像將向下調整大小，這不是我想要的。 – Bzyzz 2014-09-02 20:31:26

由於有這麼多的問題CSS，答案是「使用div容器」。

我可能誤解了你的要求，但是我能夠按照我理解的要求進行工作，所以如果這不是很對，請告訴我，我會修改。

<!doctype html> 
    <html> 
    <head> 
     <style> 
     * { 
      margin: 0; 
      padding: 0; 
     } 
     #image_limiter { 
      top:0; 
      width: 100%; 
      max-height: 500px; 
      overflow: hidden; 
     } 
     .img99 { 
      width: 100%; 
     } 
     /* 
     924px because of the aspect ratio of the image; 
     it hits full height of 500px when the screen is 
     924px wide, so thats when we want to anchor 
     it to the lower left of the container div. 
     */ 
     @media (min-width: 924px) { 
     #image_limiter { 
      position: fixed; 
      height: 500px; 
     } 
     .img99 { 
      position: absolute; 
      bottom: 0px; 
      left: 0px; 
     } 
     } 
     </style> 
    </head> 
    <body> 

     <div id="image_limiter"> 
     <img class="img99" src="http://a.gifb.in/022014/1392140403_plane_crashes_while_taking_off_on_a_beach.gif" /> 
     </div> 

    </body> 
    </html>

來源

2014-09-02 20:56:18 hoverbikes

謝謝，它實現了屏幕頂部的重新調整。我對img99 CSS進行了一些更改，因爲我不希望圖像比924x500更小：.img99 {0} {0} {0}％{width} 100％; \t \t \t min-height：500px; \t \t \t min-width：924px; } – Bzyzz 2014-09-03 16:56:44

這是我嘗試的一種方法 - 在這種情況下，您不需要媒體查詢，並可以將這些屬性移動到主CSS中。請接受，如果這解決了你的問題。 – hoverbikes 2014-09-03 17:20:49

當調整窗口大小時，CSS調整圖像大小調整圖像的大小

Fiddle

回答

相關問題