весь экран фоновое изображение растянуто

Я сделал полный экран фоновое изображение для одного из моих клиентов, но проблема заключается в том, что, когда я сделать изображение, чтобы уместить на экране с помощью следующих CSS коды:весь экран фоновое изображение растянуто

#bg-image img{ 
position:fixed; 
left:0; 
top:0; 
width:100%; 
max-height: 100%; 
} 
#bg-image{ 
height: 100%; 
width: 100%; 
float: left; 
overflow: hidden; 
position: relative; 
}

Все работает отлично, так как изображение заполняет весь фон моей домашней страницы, но проблема в том, что теперь фоновое изображение кажется растянутым, и я хотел бы знать, как сделать мое изображение размером или соотношением правильным чтобы соответствовать размеру всего экрана, без растягивания (с полным качеством), чтобы фоновое изображение было качественным, чтобы быть идеальным.

Итак, как сделать мое изображение идеально подходящим на фоне моей домашней страницы.

Любая помощь была бы очень оценена!

источник

2013-11-27 Hamza Abd Elwahab

Вот несколько хороших вариантов, даже те, которые работают в IE8. Хотя размер фона большой и довольно простой, IE8 не поддерживает его. Если это не фактор, то не беспокойтесь об этом. http://css-tricks.com/perfect-full-page-background-image/ –

Вы должны действительно изучить свойство background size вместо использования фиксированных изображений. Использование «обложки» для фонового размера означает, что изображение должно расти или уменьшаться настолько, чтобы покрыть весь фон.

Если вы знаете размеры изображения. Вы можете использовать медиа-запрос, чтобы изменить размер фона на «авто», если он в противном случае вырастет за пределами его первоначального размера.

html, body { 
    min-height: 100%; 
} 
body { 
    background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    background-size: cover; 
} 
@media (min-width: 1120px), (min-height: 630px) { 
    body { background-size: auto; } 
}

источник

2013-11-27 22:47:39

Фон появляется правильно, но проблема в том, что изображение выглядит так растянуто, я хочу, чтобы оно выглядело с высоким качеством и соответствовало целому (например, без прокрутки), некоторые из них, это очень важно для меня. Я не знаю, могу ли я сделать это, используя css 3, или изменив размер моего изображения, чтобы оно отображалось в полном качестве. –

Это, безусловно, путь, просто не забывайте, что IE8 не поддерживает 'background-size', поэтому вы можете оставлять небольшую часть пользователей на холоде. –

Проблема в том, что изображение все еще растянуто на моем сайте, я бы хотел, чтобы он выглядел на 100% по качеству. Вы можете увидеть здесь http://leydenlewis.com/ –

Попробуйте сделать что-то вроде этого:

#bg-image { 
position:fixed; 
left:-50%; 
top:-50%; 
width:200%; 
height: 200%; 
} 

#bg-image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
}

Это должно получить результаты, которые вы хотите и работать в большинстве браузеров, а также.

источник

2013-11-27 22:53:39

К сожалению, это обрезало мое изображение сверху и снизу, поэтому не все изображение появляется прямо сейчас. Мне хотелось бы, чтобы мое изображение отображалось на моей странице 100%, но с полным качеством я не хочу, чтобы он выглядел растянутым. Это ссылка на мой сайт http://leydenlewis.com/ –

Попробуйте один из методов в этой ссылке и посмотрите, работает ли кто-нибудь из них: http://css-tricks.com/perfect-full-page-background -image/ –

@HamzaAbdElwahab Кроме того, если вы хотите, чтобы ваше фоновое изображение поддерживало его соотношение сторон и заполняло весь экран независимо от размера экрана, вам придется обрезать изображение в какой-то момент. –

Это должно сохранить изображение правильное соотношение:

#bg-image{ 
height: auto; 
width: auto; 
float: left; 
overflow: hidden; 
position: relative; 
}

источник

2013-11-28 14:57:04 guymid

<style> 
body { 
background: url(http://37.media.tumblr.com/tumblr_lusitdffhf1qj5tnlo1_r1_500.gif); 
background-size: 320px 600px; 
background-repeat: no-repeat; 
padding-top: 40px; 
} 
</style>

источник

2014-06-12 13:23:08

Пожалуйста, объясните свой код – Gwenc37

Хотя этот код может помочь решить проблему, только ответ на код не является высоким качеством. Лучший ответ говорит о том, что делает код, объясняет, почему был сделан подход, показывает, где вставлен код, и ссылки на соответствующую документацию. –

Поскольку вопросы конкретно не заявить CSS только (или НЕ Javascript), вот решение JQuery, что я выработанный и использовали. Я заметил, что может быть проблема с мобильными браузерами.

//resize the background image 
function resizeImage($selection){ 
    //get the ratio of the image 
    var imageRatio = $selection.width()/$selection.height(); 

    //get the screen ratio 
    var screenRatio = $(window).width()/$(window).height(); 

    //if the image is wider than the screen 
    if(imageRatio > screenRatio){ 
     $selection.height($(window).height()); //set image height to screen height 
     $selection.width($(window).height()*imageRatio); //set the correct width based on image ratio 
    } 

    //if the screen is wider than the image 
    else{ 
     $selection.width($(window).width()); //set the image width to the screen width 
     $selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio 
    } 
}

Выполнить это всякий раз, когда вы хотите, чтобы изменить размер изображения, как правило, на «OnResize» и «OnLoad»

<body onresize="resizeImage($('#bgImage'))">

источник

2014-06-20 06:40:26 Adam

весь экран фоновое изображение растянуто

ответ

Смежные вопросы