css background image resize width height height

Question

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

Вторая проблема, с которой я сталкиваюсь, заключается в том, что она не работает, если я не использую FQDN для изображения, а не только для URL-адреса ниже.

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Answer 1

Вместо

background-size: cover; 

вы хотите использовать

background-size: 100% auto; 

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

Answer 2

Я бы использовал JS для этого. Похоже, что CSS не справляется с пропорциями.

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

Сначала создайте DIV и поместить изображение в нем

<div class="big-image"> 
    <img src="path.jpg" width="1000" height="1000" alt="whatever"> 
</div> 

Тогда сделайте это в вашем CSS:

.featuredImage img { 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -10; 
} 
/* this class will be added via JS */ 
.bgwidth { width: 100%; } 
.bgheight { height: 100%; } 

И, наконец, ваш JS

var theWindow = $(window), 
    $bg = $(".big-image img"), // Use your image selector here. 
    aspectRatio = $bg.width()/$bg.height(); 

    $bg.removeAttr('width'); 
    $bg.removeAttr('height'); 

    function resizeBg() { 
    if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
     $bg 
     .removeClass() 
     .addClass('bgheight'); 
    } else { 
     $bg 
     .removeClass() 
     .addClass('bgwidth'); 
    } 
    } 
    theWindow.resize(function() { 
    resizeBg(); 
    }).trigger("resize"); 

Дайте мне знать, если это имеет смысл. Не совсем точно CSS, который я знаю, но это решение.

Answer 3

Соотношение сторон изображения не изменяется при использовании cover. Тем не менее, я считаю, что вы хотите исправить нижнюю часть изображения, так как вы сказали, что хотите, чтобы его обрезали сверху, а не в центре, и я думал, что вы хотите сказать не сверху и снизу.

Если вы хотите сохранить нижнюю часть внизу (возможно, лугопастбищ с избегаемым большим небом?), То вам нужно будет изменить положение на center bottom от center center.

Если вы делаете это на 100% автоматически, как предложил Нит, то в окне, где отношение высоты/ширины элемента html больше, чем у вашего изображения, вы увидите пустое место наверху, которое может быть тем, что вы хотели, особенно в случае, если вы используете изображение, которое исчезает в тот же цвет сверху ...

Для вашей второй проблемы это не fqdn, это относительная/абсолютная ссылка вашего пути. Согласно вашему css, должна быть папка с изображениями, в которой находится ваш файл css, в котором есть bg.jpg.

index.html 
main.css 
images/ 
    bg.jpg