Fiddle

Question

我希望窗口顶部的图像高度为0px到500px。它将水平占据整个窗口，并始终保持相同的宽高比。

当窗口调整得更大时，图像的底部不会低于500px。图像将在屏幕的顶部和右侧部分调整大小（以保持相同的宽高比）。因此，x = 0px，y = 500px将是图像左下角的固定位置。

当窗口水平调整大小时，以下实现了增加图像大小的正确效果，但我不想要＆＃34;底部：30px;＆＃34;因为这应该与窗口的顶部有关。怎么办呢？

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

Answer 1

与许多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>

当窗口调整大小时，CSS会在屏幕顶部调整图像大小

Fiddle

1 个答案: