调整顶部横幅图片大小的最佳方式 (viewport/html)

Question

我正在尝试找到一种更好的方法来调整顶部横幅图像的大小，根据视口方向和视口大小创建不同的图像，而不会使图像 "cutted" 或变形。我创建了以下代码 (css + js)，我想知道这是否是正确的方法，或者是否存在更好的方法。

CSS 到 <img> 或 <div> 与 background-image:

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

JS:

$(document).ready(function () {
    resizeViewPort();
});

$(window).resize(function () {
    resizeViewPort();
});

function resizeViewPort() {
    alert(($(window).height() / $(window).width()).toFixed(2));

    var height = $(window).height(), width = $(window).width();
    var scale = (height / width).toFixed(2);

    if (scale >= 1.7 && scale <= 1.8) {
        if (height <= 736) { // 736x414
            alert("Mobile PORTRAIT");
        }
    }
    else if (scale >= 1.3 && scale <= 1.6) {
        if (height <= 1024) { // 1024x768
            alert("Tablet PORTRAIT");
        }
    }
    else if (scale >= 0.6 && scale <= 0.8) {
        if (height <= 768) { // 768x1024
            alert("Tablet LANDSCAPE or Desktop 4:3");
        } else if (height <= 900) { // 900x1440
            alert("Desktop HD 16:10");
        } else if (height <= 1200) { // 1200x1920
            alert("Desktop FullHD 16:10");
        }
    }
    else if (scale >= 0.5 && scale < 0.6) {
        if (height <= 414) { // 414x736
            alert("Mobile LANDSCAPE");
        } else if (height <= 720) { // 720x1280
            alert("Desktop HD 16:9");
        } else if (height <= 1080) { // 1080x1920
            alert("Desktop FullHD 16:9");
        } 
    }
}

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 手机）

调整顶部横幅图片大小的最佳方式 (viewport/html)

Best way to resize top banner images (viewport/html)

html

javascript

css

resize

image