116问答网 > CSS在图片宽度100%的情况下，如何设置高度始终铺满剩下屏幕，并且图片不变形。

CSS在图片宽度100%的情况下，如何设置高度始终铺满剩下屏幕，并且图片不变形。

2025-03-23 23:35:09

推荐回答（3个）

回答1：

既要宽度100%，又要不变形，这两个条件决定了图片的高度不能另外设置，只能跟随宽度的变化而变化，这样就无法保证完全覆盖剩余区域。除非把条件改为：当图片的宽高比大于区域的宽高比，则图片的高度100%，宽度超出区域的部分允许突出在区域外面；反之，则宽度100%，高度超出区域的部分允许突出在区域外面。是这个意思吗？

回答2：

如果是一张图片的话，我觉得很难，至少我一时半会儿想不出来，可能会有人能想出来。如果不是一张图片，可以去找UI出各个高度的图片，然后使用媒体查询根据不同高度加载不同的图片

回答3：

设置css语法 img {max-width:100%;}