我希望窗口顶部的图像的高度为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

回答

相关问题