调整顶部横幅图像大小的最佳方法 (viewport/html)答案

【问题标题】：Best way to resize top banner images (viewport/html)调整顶部横幅图像大小的最佳方法 (viewport/html)
【发布时间】：2015-08-28 17:44:52
【问题描述】：

我正在尝试寻找一种更好的方法来调整顶部横幅图像的大小，创建适合视口方向和视口大小的不同图像，而不会“剪切”或扭曲图像。我创建了以下代码（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");
        } 
    }
}

【问题讨论】：

想要的效果是什么？保持纵横比？调整到固定比例？目前尚不清楚您想要实现什么。
@JosephMarikle 我想创建适合视口方向和视口大小的不同图像，而不会“剪切”或扭曲图像。

标签： javascript html css image resize

【解决方案1】：

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

background-size: cover;

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

或者：

background-size: contain;

将图像缩放到最大尺寸，使其宽度和高度都可以容纳在内容区域内。

【讨论】：

不错！但是有一个“小”问题。我想创建适合视口方向和视口大小的不同图像，而不会“剪切”或扭曲图像。
如果你使用 width: 100% ，例如，高度会相应地调整而无需剪切。

【解决方案2】：

我想调整图像大小的更好方法是通过媒体查询，因为它纯粹是基于 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) {

 }

【讨论】：

不错！但是有一个“小”问题。我想创建适合视口方向和视口大小的不同图像，而不会“剪切”或扭曲图像。
@ViniciusOttoni 如果您在上述媒体查询中以百分比（例如：70%）为单位指定尺寸，则图像不会被剪切，并且对于失真，我认为它们有许多在线工具可以帮助您创建不失真的不同宽度和高度的图像，您可以在媒体查询中使用 display:none 来仅显示适合视口的图像。
如何使用媒体查询跟踪纵向和横向？有可能吗？
@ViniciusOttoni 是的，有可能，看看我更新的答案

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

【讨论】：