保持背景图片的宽高比

Question

我需要使用CSS属性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时，例如，它会变形以适应容器大小。

- Patrick

---

你需要一个纯CSS的解决方案还是可以使用一些JavaScript？ - pasine

嗨，谢谢。我更喜欢使用CSS解决方案。 - Patrick

我建议使用CSS（background-size）来实现，可以查看优秀的文档 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size - Adriano Resende

Answer 1

由于您已经使用了jQuery，因此我假设您愿意采用jQuery解决方案，因为我读到了您的评论，其中说：

“如果视口大小超过原始图像大小，则要使背景图像居中，如果视口大小等于或小于实际大小，则需要响应式背景。”

因此，在这里，我使用jQuery来检测窗口的高度和宽度，并相应地调整您的背景图像。

演示：Demo

$(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');
    }
});

---

由于在 background-size 中没有 max-width 和 max-height，所以没有 CSS 解决方案。如果您正在寻找纯 CSS 解决方案，那么您将需要一个 absolute 定位的 img 标签，其中定义了 max-height 和 max-width，并设置了负的 z-index，但仍然会遇到有关元素居中定位的一些问题...

---

在你评论后，你说图像的尺寸将是动态的，而容器将是固定的。

现在，代码完全兼容您固定的宽度容器元素... 您现在无需做任何事情，它完全是动态的，也要感谢this 的回答，帮助我获取了图像的高度和宽度。

$(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 (当图像宽度大于容器宽度时)

- Mr. Alien

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>

请查看这篇文章以获取更多关于完美全屏背景图片的信息。

- dippas

---

嗨，谢谢，但我想保持图像的原始高度和宽度。 - Patrick

所以你希望 div .fotowind 根据每张图片的宽度/高度进行动态调整？ - dippas

@Patrick，请检查这个fiddle，看看是否符合您的要求： http://jsfiddle.net/D6Nd8/1/抱歉，我还没有完全理解您在这里想要实现什么。 - dippas

你好，感谢提供示例。为了更清晰地说明，根据您的示例，我想完整显示图像，但当背景大小区域大于图像大小时，图像将保持最大尺寸并居中于背景容器区域。 - Patrick

我已经放置了一个关于图像与背景容器行为的示例。 - Patrick

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。

- pasine

---

嗨，谢谢，但是图像必须调整为容器的高度和宽度。查看我的示例，您会发现当容器的高度变小时，图像会变小。 - Patrick

谢谢你的帮助，但我选择了Alien先生的解决方案，因为它很有效并且非常灵活。 - Patrick

我发现 "background-size: contain" 这个声明是解决一个类似问题的关键。谢谢！ - apritch