Поддерживать соотношение сторон фонового изображения

Мне нужно представить изображения в контейнере, используя свойство CSS background-image

Проблема заключается в том, что мне нужно представить каждое изображение, сохраняющее его соотношение сторон, и максимизировать представление изображения в height или width изображения, центрированного внутри контейнера.

HTML:

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

EDIT:

Начальные свойства CSS контейнера .fotowind:

.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

Ответы

Ответ 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, потому что у нас нет max-width и max-height для background-size, поэтому, если вы ищете чистое решение CSS, вам понадобится absolute расположенный img тега с max-height и max-width с z-index, установленным на отрицательный, но все же вы столкнетесь с некоторыми проблемами относительно позиционирования центра элемента...

После того, как вы прокомментировали, вы сказали, что изображения будут динамическими по размеру, и контейнер будет исправлен так.

Теперь код полностью совместим с вашими фиксированными элементами контейнера 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 (размер контейнерa > размер изображения)

Демо 3 (высота изображения > высота контейнера)

Демо 4 (Где высота изображения > высота контейнера [2])

Демо 5 (где ширина изображения > ширина контейнера)

Ответ 2

что об этом:

.fotowind {
  background: url(http://lorempixel.com/400/400) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 180px/*demo purposes*/
  
}
<div class="fotowind shadow">&nbsp;</div>

Ответ 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;
}

Вот рабочий код