調整頂部橫幅圖像大小的最佳方式（視口/ html）

我試圖找到一種更好的方式來調整頂部橫幅圖像的大小，創建不同的圖像，以適應根據視口方向和視口大小而不會將圖像「切割」或distorced。我創建了下面的代碼（css + js），我想知道是否是正確的方式，或者是否存在更好的方法。調整頂部橫幅圖像大小的最佳方式（視口/ html）

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"); 
     } 
    } 
}

來源

2015-06-12 Vinicius Ottoni

需要的效果是什麼？保持寬高比？調整到固定比例？目前還不清楚你想實現什麼。 –

@JosephMarikle我想根據視口的方向和視口大小創建不同的圖像，而不會將圖像「切割」或失真。 –

使用Saumil瑞裏，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 Mobile）

來源

2015-06-13 16:26:57

我想一個更好的辦法來調整圖像就是通過媒體查詢，因爲它是純粹基於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: */ 

    }

在媒體查詢中，您可以指定您想要的移動肖像，平板電腦肖像或完整桌面的橫幅圖像的尺寸。

UPDATE：檢測到設備是否處於橫向或縱向模式，

@media screen and (orientation:portrait) { 

} 
@media screen and (orientation:landscape) { 

}

來源

2015-06-12 16:25:28

不錯！但是有一個「小」的問題。我想根據視口方向和視口尺寸創建不同的圖像，而不會將圖像「切割」或變形。 –

@ViniciusOttoni如果您在上述媒體查詢中指定了百分比尺寸（例如：70％），並且出現扭曲，我認爲它們是許多在線工具，可幫助您創建不同寬度和高度的圖像不失真，您可以在媒體查詢中使用display：none來僅顯示適合視口的圖像。 –

如何使用媒體查詢追蹤縱向和橫向？這是可能的？ –

也許你有興趣在CSS僅與解決方案：

background-size: cover;

規模的背景圖像是儘可能大以使背景區域完全被背景圖像覆蓋。背景圖像的某些部分可能不在背景定位區域內。

或者：

background-size: contain;

縮放圖像的最大尺寸是這樣的，它的寬度和高度都可以適應內容區域內。

來源

2015-06-12 16:25:56

好！但是有一個「小」的問題。我想根據視口方向和視口尺寸創建不同的圖像，而不會將圖像「切割」或變形。 –

例如，如果使用寬度：100％，則高度將相應地適應，而不會剪切。 –

調整頂部橫幅圖像大小的最佳方式（視口/ html）

回答

相關問題