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

我试图找到一种更好的方法来调整顶部横幅图像的大小，根据视口方向和视口大小创建不同的图像，而不需要“剪切”或分离图像。我创建了以下代码（css+js），我想知道这是正确的方法，还是存在更好的方法

CSS到

或带有

背景图像的
：

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

JS:

$（文档）.ready（函数（）{
调整视口的大小（）；
});
$（窗口）。调整大小（函数（）{
调整视口的大小（）；
});
函数resizeViewPort（）{
警报（（$（窗口）.height（）/$（窗口）.width（））.toFixed（2））；
变量height=$（window.height（），width=$（window.width（）；
变量标度=（高度/宽度）.toFixed（2）；
如果（scale>=1.7&&scale我想更好的调整图像大小的方法是通过媒体查询，因为这纯粹是基于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) {

 }

也许您对CSS唯一解决方案感兴趣，该解决方案包括：

background-size: cover;

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

或：

将图像缩放到最大尺寸，使其宽度和高度都能适应内容区域。
使用Saumil Soni、Germano Plebani和，我得出以下解决方案（谢谢大家！）：

使用此解决方案，您可以升级到所需的所有分辨率。（例如，将1600x900图像添加到其他桌面设备，将640x320图像添加到新的Galaxy手机）
想要的效果是什么？保持纵横比？调整大小到固定比例？不清楚您想要实现什么。@JosephMarikle我想创建不同的图像，根据视口方向和视口大小进行匹配，而不需要“剪切”或分离图像。很好！但是有一个“小”问题。我想创建不同的图像，根据视口方向和视口大小进行匹配，而不会“剪切”或分离图像。@ViniciusOttoni如果您在percetage中指定尺寸（例如：70%），则不会剪切图像在上述媒体查询和失真中，我认为有许多在线工具可以帮助您创建不同宽度和高度的图像而不失真。您可以使用display:none在媒体查询中仅显示那些适合视口的图像。如何使用媒体查询跟踪纵向和横向？这是非常重要的有可能吗？@ViniciusOttoni是的，有可能，请查看我的更新答案Nice！但有一个“小”问题。我想创建不同的图像，根据视口方向和视口大小进行匹配，而不需要“剪切”或分离图像。例如，如果使用宽度：100%，则高度将相应地调整，而不需要剪切。
background-size: cover;

background-size: contain;

/* 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;
    }
}