Question

我需要使用CSS属性background-image

在容器中显示图像

这里的问题是我需要呈现每个保持其宽高比的图像，并最大化图像的呈现方式，以容器内部居中的图像的height或width。 / p>

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时，它会变形为容器尺寸

Example

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和background-size所以如果您正在寻找一个纯CSS解决方案，那么您将需要一个absolute 定位 img代码，max-height和max-width定义为z-index设置为否定，但您仍将面临关于元素中心定位的一些问题......

在您发表评论之后，您说图像在尺寸上是动态的，容器将被修复，以便...

现在，代码与您固定的width容器元素完全兼容..您现在无需执行任何操作，而且它完全是动态的，这也归功于this的答案，这有助于我获取图片的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');
        }
    });
});

很少有演示来说明上面的代码......

Demo 1 （图片尺寸＆gt;大于元素尺寸）

Demo 2 （容器尺寸＆gt;图片尺寸）

Demo 3 （图片高度＆gt;容器高度）

Demo 4 （图片高度＆gt;容器高度[2]）

Demo 5 （图片宽度＆gt;容器宽度）

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>

查看有关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

保持背景图像的纵横比

编辑：

3 个答案: