【问题标题】：CSS resize image off top of screen when window resized larger当窗口调整大时，CSS将图像调整到屏幕顶部
【发布时间】：2014-09-03 04:56:18
【问题描述】：

我想在窗口顶部的高度为 0 像素到 500 像素的图像。它将水平占据整个窗口，并始终保持相同的纵横比。

当窗口被调整得更大时，图像的底部不会低于 500 像素。图像将从屏幕的顶部和右侧部分调整为更大（以保持相同的纵横比）。所以，x=0px, y=500px 将是图片左下角的固定位置。

当窗口水平调整大小时，下面实现了增加图像大小的正确效果，但是我不想要“底部：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

【问题讨论】：

尝试应用一些@media 查询 css
根据您要查找的内容将底部声明更改为 top:0px 或 bottom:0
top:0px 不会使图像大小超出屏幕顶部。图像将向下调整大小，这不是我想要的。
类似于“airbnb”网站

标签： html css image

【解决方案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>

【讨论】：

谢谢，这实现了屏幕顶部的调整大小。我对 img99 CSS 做了一些更改，因为我不希望图像小于 924x500: .img99 { width: 100%;最小高度：500px；最小宽度：924px； }
这也是我尝试过的一种方法——在这种情况下，您不需要媒体查询，并且可以将这些属性向上移动到主 css 中。如果这解决了您的问题，请接受。