【问题标题】:How to make banner images adjust to different size screen?如何使横幅图像适应不同尺寸的屏幕?
【发布时间】:2017-05-19 05:32:15
【问题描述】:

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

【问题讨论】:

  • 你想让它以哪种方式响应?通过 css 或 jquery ?
  • @AmbrishPathak,或者,我想了解有关此问题的更多解决方案:)

标签: jquery responsive banner


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

【讨论】:

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

    【讨论】:

    • 是这样吗? When(max-width: 1920px){ .picture { width: 1366px;高度:768px; } } 而当 (max-width: 1366px) 时,图片大小也是1366px * 768px?
    • 是的,这是正确的,只需替换为您需要的尺寸
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-28
    • 1970-01-01
    • 2018-12-19
    • 2011-04-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多