保持背景圖像的縱橫比

Question

我需要使用CSS屬性background-image在容器中顯示background-image

這里的問題是我需要呈現保持其縱橫比的每個圖像，並最大化圖像的呈現到容器內部的圖像的height或width 。

HTML：

<div class="fotowind shadow"></div>

---

編輯：

.fotowind容器的初始CSS屬性：

.fotowind {
    overflow:hidden;
    margin-left:10px;
    background:#333;
    margin-bottom:5px;
    z-index:30;
    background-position: center center !important;
    background-repeat: no-repeat;
} 

根據窗口大小動態構建屬性的代碼 - 我需要調整圖像的大小，保持比例，即使是一些空白區域保留在兩側：

jQuery的：

windowWidth = $(window).width();
windowHeight = $(window).height();

if (windowWidth <= 1200 && windowWidth > 768 || windowHeight < 900)
{
    $('.fotowind').css('width', '650px').css('height', '425px');
}
else if (windowWidth > 1200 || windowHeight > 900)
{
    $('.fotowind').css('width', '950px').css('height', '650px');
}

if (windowWidth <= 768)
{
    $('.fotowind').css('width', '450px').css('height', '425px');
}

產生的HTML：

<div class="fotowind shadow" style="background-image: url(http://localhost/AdPictures/25/2c/c2/4c/-9/77/1-/4b/77/-b/ff/a-/57/e5/10/2b/31/b1/7516_1_xl.jpg); background-size: 100%; width: 950px; height: 650px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>

例如，在圖像尺寸為800x600某些情況下，我無法以此尺寸顯示圖像，或者當圖像具有200x650 ，它會變形為容器尺寸。

Answer 1

當我看到你已經在使用jQuery時，我假設你對jQuery解決方案持開放態度，因為，當我讀到你的評論時，

如果視口大小超過原始圖像大小，並且它等於或小於實際大小，我希望將background-image居中，而不是您想要的響應背景

所以在這里，我使用jQuery來檢測窗口的height和width ，因此調整了background-image大小

演示

$(window).on('resize', function() {
    if($(window).width() < 300) { //original idth of your background image
        $('div.fotowind').css('background-size', '100% auto');
    } else if($(window).height() < 300) { //original height of your background image
        $('div.fotowind').css('background-size', 'auto 100%');
    } else {
        $('div.fotowind').css('background-size', 'auto');
    }
});

---

沒有CSS解決方案因為我們沒有background-size max-width和max-height所以如果你正在尋找一個純CSS解決方案，那么你將需要一個absolute 定位的 img標簽， max-height和使用z-index設置為負定義的max-width ，但是您仍然會遇到有關元素中心定位的一些問題...

---

在您評論之后 ，您說圖像在尺寸上將是動態的，並且容器將被修復以便...

在這里，現在代碼與您的固定width容器元素完全兼容..您現在無需任何操作，它完全是動態的，這也要歸功於這個答案幫助我獲取圖像的height和width

$(document).on('ready', function() {
    var image_url = $('div.fotowind').css('background-image'), image;

    // Remove url() or in case of Chrome url("")
    image_url = image_url.match(/^url\("?(.+?)"?\)$/);

    if (image_url[1]) {
        image_url = image_url[1];
        image = new Image();
        image.src = image_url;
    }

    // just in case it is not already loaded
    $(image).load(function () {
        imgwidth = image.width;
        imgheight = image.height;

        if($('div.fotowind').width() < imgwidth) {
            $('div.fotowind').css('background-size', '100% auto');
        } else if($('div.fotowind').height() < imgheight) {
            $('div.fotowind').css('background-size', 'auto 100%');
        } else {
            $('div.fotowind').css('background-size', 'auto');
        }
    });
});

很少有演示來說明上面的代碼在行動......

演示1 （圖像大小>比元素大小）

演示2 （容器尺寸>圖像尺寸）

演示3 （圖像高度>容器高度）

演示4 （圖像高度>容器高度[2]）

演示5 （圖像寬度>容器寬度）

Answer 2

您可以使用background-size: cover

 body { margin: 0 } .fotowind { background: url(//placehold.it/400) fixed no-repeat center / cover; min-height: 100vh /*demo purposes*/ } 

 <div class="fotowind shadow">&nbsp;</div> 

查看更多信息此文章

Answer 3

我試圖提出兩個不同的解決方案，一個帶有背景圖像，另一個帶有圖像標簽。
這是代碼：

HTML

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Mei_Foo_Station_2.JPG" alt="foo" />
  <div class="bg"></div>
  <div class="bg bg_h_s"></div>
  <div class="bg bg_h_m"></div>
  <div class="bg bg_h_l"></div>
  <div class="bg bg_w_s"></div>
  <div class="bg bg_w_m"></div>
  <div class="bg bg_w_l"></div>
</div>

CSS

.container {
  text-align: center;
  background-color: grey;
}

.bg {
  background: url(https://upload.wikimedia.org/wikipedia/commons/e/e2/Mei_Foo_Station_2.JPG) no-repeat center center blue;
  -webkit-background-size: contain;
  background-size: contain;
  height: 480px
}

img, .bg {
  width:100%;
  max-width:640px;
  margin: 30px auto;
}

.bg_h_s {
  height:100px;
}

.bg_h_m {
  height:200px;
}

.bg_h_l {
  height:300px;
}

.bg_w_s {
  width:200px;
}

.bg_w_m {
  width:400px;
}

.bg_w_m {
  width:600px;
}

這是工作的codepen