如何使横幅图像适应不同尺寸的屏幕？

Question

现在我有一张 1920*628 像素的图片。我的电脑屏幕是1366*768px，如何让banner图片适应不同尺寸的屏幕？有没有合适的解决方案来解决这个问题？

Answer 1

有多种方法可以使图像具有响应性。

css方式

添加 max-width:100% 和 height:auto 将使图像灵活

对于 IE8，您需要添加 width:auto\9

Responsive-img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* for ie8 */
}

.Responsive-img 类的任何图像都会自动调整 wrt 容器。

css 3 方式

@media only screen and (min-width: 1440px) {
    /* styles for 1440 px sized screens and larger */
}

类似的其他 css 3 媒体查询。

@media only screen and (min-width: 1200px) {
    /* styles for wide screens */
}

@media only screen and (max-width: 320px) {
    /* styles for mobile devices or narrow screens */
}

有关 Css 3 媒体查询的更多信息，请参阅 this link

使用jQuery插件Responsive Img

在网页中包含插件

<script src="js/responsiveImg.js"></script>

然后

$("img").responsiveImg();

关于这个插件的更多信息在这里 - Responsive Img

Answer 2

很简单，如果你指的是窗口大小，使用@media

.picture{
        width:100%;
        height: auto;
}
@media (max-width: 1920px) {
   .picture {
       width: 1920px;
       height: 1080px;
    }
 }

 @media (max-width: 1366px) {
    .picture {
       width: 1366px;
       height: 768px;
    }
 }