Adaptar imagen según tamaño de pantalla sin desformar

archienemigo #1 Jul '14

Buenas, no he sabido poner un título mejor.

Se ve mejor con un ejemplo:

o este

Los dos están hechos con bootstrap, aunque bueno no es algo exclusivo de este, pero si que estoy desarrollando con el.

Adaptar un imagen al tamaño de la ventana o de un div es fácil pero si os fijáis en estos dos ejemplo la imagen no se adapta al 100%, si redimensionais el navegador podéis ir viendo como la imagen ademas de adaptarse se la va "comiendo" por los laterales, con el fin de que no se deforme (la tetera por ejemplo va desapareciendo).

Estoy haciendo un slider que se adaptar al 100% del ancho de la página,pero todas las imagenes no tienen el mismo tamaño, al tener el slider una altura fija se desforman si o si. La idea es usar esta técnica, ¿tiene algún nombre? Con que me deis alguna pista ya busco yo. ¿CSS o Javascript?

Gracias.

Merkury #2 Jul '14

Si estas usando Boostrap usa las clases que te vienen.

<img src="..." class="img-responsive" alt="Responsive image">

De todas formas en los ejemplos que has puesto estan usando las imagenes como background del div que las contiene.

.header-10-sub .background {
     background-image: url("../img/img-1.jpg"); 
     opacity: 1;
     filter: alpha(opacity=100);
}
.background {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
     background: 50% 50% no-repeat;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover; 
     background-size: cover;
     opacity: 0.2;
     filter: alpha(opacity=20);
}

Y como cierre, cuando haces un slider que va a ocupar el 100% de la página has de tratar que todas imágenes tengan el mismo tamaño (o por lo menos un ratio similar...)

1 respuesta

archienemigo #3 Jul '14

#2 Si pero solamente con la clase img-responsive no consigo ese efecto. Esto hace tiempo que busco como hacerlo ya hice pruebas en su día sin erótico resultado y recuerdo que si se usaban las imágenes como background.

¿Solo con ese código ya funcionaria?

A parte y ya que estamos, ¿adaptar un div al alto del navegador? Por ejemplo

http://riotdesign.eu/en/

Da igual que redimensión hagas, siempre adapta el alto.

Gracias.

1 respuesta

Merkury #4 Jul '14

#3 El codigo que te he pasado lo he sacado de las paginas que has puesto como ejemplo.

La redimensión del height es básicamente una función de jquery, la historia es que para que un slider full width quede bien las imágenes tienes que usarlas del mismo tamaño o ratio.

1 respuesta

archienemigo #5 Jul '14

#4 Lo probaré, ya lo intente un día copiando de esta manera y algo me fallaba. Luego te cuento.

Ok ok tengo en cuenta lo de las imagenes.
Sabes que función es, jQuery termine de estudiarlo hace poco y tengo un cacao interesante. Ya buscaré yo si no, que tampoco quiero pedir mucho.

Merkury #6 Jul '14

Pues la funcion exacta no la se, pero basicamente tienes que hacer que cada vez que la ventana cambie, cambie el slider, si no me falla la memoria con .resize puedes hacerlo.

1 respuesta

taltal #7 Jul '14

Lo mejor es usar un div con background image.
A ese div le das height y width 100%.
Y la propiedad clave para lo que necesitas:
background-size:cover;

2 respuestas

archienemigo #8 Jul '14

#6 #7 Aun no he podido ponerme a probarlo, pero si es así de fácil, te entrego a mi primogénito como pupilo.

1 respuesta

Merkury #9 Jul '14

#8 Bien perfecto que voy escaso de pupilos primogenitos.

1 1 respuesta

archienemigo #10 Jul '14

#7 #9

Funciona si y no.

La imagen que estoy usando de ejemplo es esta:

http://www.adjtos.ca/PublishingImages/council/Council%20Brown-Gavel%20Image.jpg

Son 2800 × 1874.

Le meto la propiedad cover y altura y anchura al 100%. Pero digamos que la expande demasiado. De hecho no se a que tamaño la expande, he pensado que al ratio de la imagen que es demasiado grande. Al ir achicando la ventana del navegador cada vez va entrando más contenido de la imagen, que es el efecto que quiero.

ventana maximizada

ventana achicada

Lo que no quiero es que con la ventana maximizada el background salga tan expandido, asi que como ya digo, pense que seria el ratio de la imagen, pero da igual que tamaño le ponga (100x100 si quereis) la expande igualmente con el mismo tamaño. No se si me estoy explicando, dejo otra captura.

ratio de la imagen 149x100

Como veis sale pixeladisima, pero al mismo tamaño, que no se cual es. Cambiar el tamaño del contenedor no me sirve y el tamaño ya se lo estoy dando con cover.

El slider lo estoy haciendo con el de bootstrap que viene por defecto:

<div id="triensCarousel" class="carousel slide" data-ride="carousel">		
        <div class="carousel-inner">
        <div class="item active">
                <!-- <img src="img/slide1.jpg" class="img-responsive" />-->
                <div class="carousel-caption">
                        <h1>Cabecera</h1>					
                        <p>Abogados - Economistas - Auditores - Consultoria internacional</p>
                        <p class="btn">Conoce nuestros servicios</p>
               </div>
        </div>			
        </div><!-- carousel-inner -->
</div><!-- carousel slide -->

El codido CSS de item es pues el que me habeis puesto.

.item{
    background-image: url('../img/slide1.jpg') ;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
}

No se como tabular el código en el post. ¿Como lo veis?

Merkury #11 Jul '14

Lo que querías era que la imagen ocupase toda la página de largo y de alto no?

1 respuesta

archienemigo #12 Jul '14

#11 No no era un slider, o carousel o como lo queráis llamar, o una imagen de cabecera simplemente. Como la de los enlaces que pongo en #1.

De todas formas background-size estoy viendo que no lo soportan de IE9 para abajo. Así que me parece que tiraré por jQuery, me gustaría saber hacerlo a mano, pero no se ni por donde empezar. He visto un par de plugins que parece que funcionan.

EDIT: Bueno remirando los enlaces las imagenes se adaptan full al tamaño del navegador. Error mio. Osea entiendo que cover se usa únicamente para fullscreen.

1 respuesta

Merkury #13 Jul '14

#12 Ojo jQuery de IE9 para abajo tampoco va fino!

1 respuesta

archienemigo #14 Jul '14

#13 Parece que el plugin este si. Que asco de navegadores.

1 respuesta

Merkury #15 Jul '14

#14 Olvidate de soporte por debajo de IE9

1 respuesta

archienemigo #16 Jul '14

#15 http://paper-leaf.com/blog/2012/04/4-solutions-for-full-screen-background-images/

IE 7+ dice. Ya lo probaré.

taltal #17 Jul '14

Lo que buscas solo lo podrás lograr con una imagen mucho más panorámica que la que tienes ahora. Puedes o bien buscar otra imagen o con photoshop hacer que la imagen siga por la parte izquierda siguiendo con el degradado.

De todas formas, una propiedad que puede serte de utilidad es: background-position: bottom;
para que siempre se vea la base donde reposa el martillo.

Incluso puedes hacer con un mediaquery que en mas de 1500px (por ejemplo) te cargue la imagen panorámica y en menos, la imagen cuadrada.

Sobre el soporte para menos de IE9, te recomiendo que te olvides. Y te paso estas estadísticas para que lo puedas valorar si te vale la pena meter todo el follon de jquery solo por este mísero porcentaje de users que lo utilizan:
http://www.w3schools.com/browsers/browsers_explorer.asp

1 respuesta

TeNSHi #18 Jul '14

#17 No creo que el problema sea de si es mas o menos panorámica por que las que pone de ejemplo son de 1 200px × 943px y de 1 200px × 882px cuando la que usa es de 2800 × 1874.

Yo tengo la sensación de que usa un mediaquery que para un ancho mayor de X hace la imagen responsive y cuando baja de X ancho deja el tamaño de la imagen fijo aunque mayor que el tamaño nativo.

1 respuesta

taltal #19 Jul '14

#18 Yo creo que sí, ya que al hacer la ventana excesivamente ancha la imagen pierde todo el sentido, ya que apenas se ve que se trate de un martillo.

Si tomamos esto como ejemplo:
http://paper-leaf.com/blog/2012/04/4-solutions-for-full-screen-background-images/

Se ve como con pantallas anchas el contenido de la fotografía sigue teniendo un sentido, ves un teclado, las manos con el ratón y la libreta.

Otra solución podría ser hacer un mediaquery para pantallas anchas que haga el slider más alto para poder minimizar un poco el problema.

Adaptar imagen según tamaño de pantalla sin desformar

Usuarios habituales

Tags