Question

我正试图找到一种更好的方法来调整顶部横幅图像的大小，根据视口方向和视口大小创建适合的图像，而不会使图像被切割＆＃34;切割＆＃34;或者是失败的。我创建了以下代码（css + js），我想知道它是否是正确的方法，或者是否存在更好的方法。

带<img>的{{1}}或<div>的CSS：

background-image

JS：

max-width: 100%; width: auto; height: auto;

Answer 1

我想更好的调整图片大小的方法是通过媒体查询，因为它纯粹是基于CSS的方法和HTML推荐，

    @media only screen and (max-width: 768px) {
    /* For mobile phones: */

    }

    @media only screen and (min-width: 600px) {
    /* For tablets: */

    }


    @media only screen and (min-width: 768px) {
         /* For desktop: */

    }

在媒体查询中，您可以为移动肖像，平板电脑肖像或完整桌面指定所需的横幅图像尺寸。

更新：要检测设备是处于横向模式还是纵向模式，

 @media screen and (orientation:portrait) {

 }
 @media screen and (orientation:landscape) {

 }

Answer 2

也许您对仅使用CSS的解决方案感兴趣：

background-size: cover;

将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内。

或者：

background-size: contain;

将图像缩放到最大尺寸，使其宽度和高度都适合内容区域。

Answer 3

使用Saumil Soni，Germano Plebani和http://stephen.io/mediaqueries/的解决方案，我得到以下解决方案（谢谢大家！）：

/* TOP BANNER */

/* For mobile phones: */
@media only screen and (max-width: 414px) and (orientation : portrait) {
    .tp-banner {
        background-image: url(../images/style/slider/slide414x736.jpg);
        background-size: cover;
    }
}

@media only screen and (max-width: 736px) and (orientation : landscape) {
    .tp-banner {
        background-image: url(../images/style/slider/slide736x414.jpg);
        background-size: cover;
    }
}

/* For tablets: */
@media only screen and (min-width: 533px) and (orientation : portrait) {
    .tp-banner {
        background-image: url(../images/style/slider/slide768x1024.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 800px) and (orientation : landscape) {
    .tp-banner {
        background-image: url(../images/style/slider/slide1024x768.jpg);
        background-size: cover;
    }    
}

/* For desktop: */
@media only screen and (min-width: 1024px) and (min-height: 768px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1024x768.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 1280px) and (min-height: 720px)  {    
    .tp-banner {
        background-image: url(../images/style/slider/slide1280x720.jpg);
        background-size: cover;
    }
}

@media only screen and (min-width: 1440px) and (min-height: 900px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1440x900.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 1920px) and (min-height: 1080px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1920x1080.jpg);
        background-size: cover;
    }    
}

@media only screen and (min-width: 1920px) and (min-height: 1200px)  {
    .tp-banner {
        background-image: url(../images/style/slider/slide1920x1200.jpg);
        background-size: cover;
    }
}

使用此解决方案，您可以升级以适合您想要的所有分辨率。（例如，将1600x900图像添加到其他桌面设备，将640x320添加到新Galaxy Mobiles）

调整顶部横幅图像大小的最佳方法（viewport / html）

3 个答案: