Мне нужно представить изображения в контейнере, используя свойство 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
, оно деформируется до размера контейнера.