保持背景图像的纵横比

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，例如，它变形为容器大小。

Answer 1

我看到您已经在使用 jQuery，所以我假设您对 jQuery 解决方案持开放态度，因为正如我阅读您的评论所说的那样

如果视口大小超过，我想将 background-image 居中 原始图像大小，如果它等于或小于真实图像大小 大小，而不是您想要的响应式背景

所以在这里，我使用 jQuery 来检测窗口 height 和 width 并相应地调整您的 background-image

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

---

没有这样的 CSS 解决方案，因为我们没有 max-width 和 max-height for background-size 所以如果您正在寻找一个纯 CSS 解决方案，那么您将需要一个 absolute 定位 img 标签，max-height 和 max-width 定义了一个 z-index 设置为负，但你仍然会面临一些关于元素中心定位的问题......

---

在你评论后，你说图片的尺寸是动态的，而容器是固定的，所以......

在这里，现在代码与您固定的 width 容器元素完全兼容..您现在什么都不用做，它是完全动态的，还要感谢 this 的回答，它帮助我获取了 height 和 @图片的987654343@

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

很少有演示来说明上述代码的实际应用...

Demo 1 （其中图像大小> 比元素大小）

Demo 2 （其中容器大小>图像大小）

Demo 3 （其中图片高度>容器高度）

Demo 4 (其中图片高度>容器高度[2])

Demo 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"> </div>

查看this文章的更多信息

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

这里是working codepen