如果太短，强制图像到页面底部

我对移动网页有个奇怪的要求。该页面只能在移动设备上查看（Android 4.4及更高版本和iOS 7及更高版本）。如果太短，强制图像到页面底部

该页面有一个图像，没有别的。图像宽度设置为100％。如果图片太小而无法填充屏幕，我们希望将其放到页面底部（该图片有一些特殊内容需要在页面底部看到）。速战速决我们是做：

img { position: absolute; bottom:0 }

这工作正常，如果图像太小，但是如果你翻盖手机进入风景你不能向上滚动图像的顶部。

有没有一种方法可以使图像仅在屏幕太短而不能填满屏幕时才被强制到底部？

首选CSS解决方案，但JS也可以。

2015-09-27 TofuBeer

不知道我知道你真正需要的，但也许媒体查询帮助：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries –

我有点惊讶，有这么多的代表没有能够发布明确的问题......为什么你不能够滚动到顶部？这究竟是什么意思：'如果太短而不能填满屏幕/高于屏幕*'，只能逼到底部*'。 – Shikkediel

对不起，我认为问题很明显，不需要侮辱。假设图像为500x700，屏幕为500x800（出于参数的原因）。此时图像下面有100个像素，我希望图像上面有100个像素。但是，如果屏幕是500x600，我希望它在顶部，以便它们可以滚动到底部。 – TofuBeer

这是完全可能的CSS使用@media。请看下面的代码::

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
    img { 
     /* do things */ 
    } 
}

2015-09-27 02:35:32 Jesse

回答