css imagen de fondo redimensionar ancho recortar altura

Question

Estoy utilizando este código de css consejos y trucos para cubrir una imagen de fondo. El problema es que vuelve a escalar la imagen para que se ajuste tanto al ancho como a la altura y cambia la relación de aspecto. Quiero que la imagen de fondo se vuelva a escalar al ancho de pantalla completa y luego recortar solo la altura (comenzando desde la parte superior de la imagen, no desde el centro) para cubrir el puerto de visualización. De esta forma, se mantendrá la relación de aspecto de la imagen.

Un problema secundario que tengo es que no parece funcionar a menos que use el FQDN para la imagen en lugar de solo la url a continuación.

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

En lugar de

background-size: cover; 

tendrá que utilizar

background-size: 100% auto; 

cubierta estirará la imagen al tamaño más pequeño de tal manera que tanto su anchura y su altura puede caber dentro del contenido área, de ahí su problema. Ver más sobre eso over here.

Answer 2

Yo usaría JS para esto en su lugar. Parece que CSS aún no maneja muy bien las relaciones de aspecto.

probar algo como esto:

primer lugar, crear un div y poner una imagen en ella

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

Luego de hacer esto en tu 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%; } 

Y, por último, su 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"); 

Avíseme si esto tiene sentido. No exactamente CSS, lo sé, pero es una solución

Answer 3

La relación de aspecto de la imagen no se cambia cuando usa cover. Sin embargo, creo que lo que quieres es arreglar la parte inferior de la imagen, ya que dijiste que quieres que se recorta desde la parte superior, no desde el centro, lo que pensé que querías decir no desde la parte superior e inferior.

Si desea mantener la parte inferior en la parte inferior, (tal vez una pradera con un cielo evitablemente grande), entonces tendrá que cambiar de posición a center bottom desde center center.

Si lo haces 100% automático como sugirió Nit, entonces, en una ventana donde la relación altura/ancho del elemento html es mayor que la de tu imagen, verás un espacio vacío en la parte superior que puede ser especialmente en caso de que esté usando una imagen que se desvanece en el mismo color en la parte superior ...

Para su segundo problema, no es fqdn, es la referencia relativa/absoluta de su ruta. De acuerdo con su CSS, debe haber una carpeta de imágenes donde su archivo css es el que tiene un bg.jpg.

index.html 
main.css 
images/ 
    bg.jpg