ajuste de alto y ancho

Lynxcraft · #1 (**permalink**) 27/06/2012, 09:44

Buenas amigos tengo un problemita el caso es que tengo unas imágenes las cuales se ajustan al ancho de pantalla y recorta lo que sobra de alto eso esta bien siempre y cuando el usuario tenga una pagina panorámica en caso contrario se ve la imagen ajustada al ancho pero no al alto la cuestión seria es que como detectar que el alto de la imagen es menor se ajuste ha ese alto y recorte la imagen a lo ancho, he echo varias funciones de resize pero tengo problemas al ajustar el alto XD el problema principal es que la imagen se muestre en lo posible ajustada al ancho aunque se recorte, las imágenes tiene una medida de 1200 x 800

Gracias XD

emprear · #2 (**permalink**) 27/06/2012, 12:59

No entiendo muy bien el enunciado, pero fijate si esto te sirve
http://foros.emprear.com/css/bg-size-css3/

SAludos

Lynxcraft · #3 (**permalink**) 27/06/2012, 15:11

gracias por el aporte pero lamentablemente no me sirve

, el problema es que no tengo que distorsionar la imagen sino escalarla en proporción

lo que tengo que combinar es esto

enlace borrado

con esto

enlace borrado

el primero ajusta en caso de que fuera panorámica y el segundo en que el área sea mas vertical; ademas de que el área tiene que tener un mínimo de 1200 x 800 ; parece sencillo pero llevo dando vueltas toda la tarde XDXD

emprear · #4 (**permalink**) 27/06/2012, 16:25

Podés usar este plugin de jquery
http://johnpatrickgiven.com/jquery/background-resize/
Pero si no escalas, por algun lado se te va a recortar la imagen

SAludos

furoya · #5 (**permalink**) 27/06/2012, 17:47

Cita:

Iniciado por Lynxcraft

... unas imágenes las cuales se ajustan al ancho de pantalla y recorta lo que sobra de alto ... en caso contrario se ve la imagen ajustada al ancho pero no al alto

Es lo mismo.

¡¿ALGUIEN EN ESTE FORO PUEDE EXPLICAR UNA COSA CLARAMENTE AL MENOS UNA VEZ EN LA HISTORIA?!

Supongo que si la pantalla es más ancha que alta, la imagen se ajusta al ancho y si quieren ver más abajo, que usen el escroll.

Y si tienen una pantalla vertical (tablet, teléfono, o escritorio rotada para documentos impresos) que se ajuste a lo alto, y si quieren ver a la derecha, que también usen el escroll.

Porque en tus ejemplos no es fondo, es imagen pura y dura.

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

<script type="text/javascript">
var anchoPantalla, altoPantalla, anchoImagen, altoImagen, laImagen;

function mide(){
laImagen = document.getElementById("imagen");
anchoPantalla = window.outerWidth; //alert(anchoPantalla)
altoPantalla = window.outerHeight; //(altoPantalla)
anchoImagen = laImagen.offsetWidth; //alert(anchoImagen)
altoImagen = laImagen.offsetHeight; //alert(altoImagen)

if(anchoPantalla < altoPantalla) laImagen.style.height = altoPantalla + "px";
else laImagen.style.width = anchoPantalla + "px";

}

onload = mide;
</script>

</head>
<body>
<img src="http://midominio.es/new/files/img/galeria/8.jpg" id=imagen>
</body>
</html>

No recuerdo si el método que usé para medir los valores es cross-browser, pero con poner el que te falta ya tienes el escript.

¿Les parece que para semejante güevada hace falta cargar yeicuery?

furoya · #6 (**permalink**) 27/06/2012, 19:47

Recién estuve probando, y

Código:

anchoPantalla = document.body.clientWidth; 
altoPantalla = document.body.clientHeight;

Parecen funcionar en todos.

Y agregando

Código:

body {margin: 0; padding: 0; }

la imagen va de borde a borde, como si fuera un fondo.

No tengo un móvil para probar. No sé qué habrá que usar para esos navegadores. Lo de la pantalla 'vertical' lo vi rotando el monitor 90°, pero sigo usando los mismos navegadores "de escritorio".

Una duda ¿al redimensionar hay que hacer el ajuste también?.

Lynxcraft · #7 (**permalink**) 28/06/2012, 01:08

Cita:

Iniciado por emprear

Podés usar este plugin de jquery
http://johnpatrickgiven.com/jquery/background-resize/
Pero si no escalas, por algun lado se te va a recortar la imagen

SAludos

dios maquina mil gracias XD estaba súper atascado con eso gracias ha ese plugin he podido extraer la función que me hacia falta

Cita:

.. unas imágenes las cuales se ajustan al ancho de pantalla y recorta lo que sobra de alto ... en caso contrario se ve la imagen ajustada al ancho pero no al alto

PERDON XD

el problema es que no solo son imágenes las que tenia que ajusta sino áreas por eso me hacia falta una función capaz de ajustar cada area de este contenido

enlace borrado

Gracias por todo XD

furoya · #8 (**permalink**) 28/06/2012, 05:13

Está muy bien eso de usar la scrollbar como control de slide, pero con una animación personalizada.

Lo que hay que aclararle a los que pasen a buscar ideas que esa página aún no está terminada. Los ajustes no andan en todos los navegadores, sólo en algunos casos sigue al resize, falta un botón para detener la música, hay que optimizar la carga ...

Y me parece que al final sí era ajustar siempre a lo ancho. Un punto importante es que te asegures que en cualquier navegador muestre las barras de desplazamiento (en Opera tuve algunos problemas, pero terminé usando el maus con su botón flotante, y la vi).

Donde además estuviste muy bien fue en extraer el código que te hacía falta. Como dije, cargar toda la librería para esto es un despropósito.
Pero el código que te puse funciona también para objetos y demás capas. Solamente hay que quitarle el ajuste por altura, que no lo necesitas, y el resto de las variables que agregué previendo que hubiese que seguir trabajando con más posibilidades.

Lynxcraft · #9 (**permalink**) 28/06/2012, 13:33

Cita:

Iniciado por furoya

Está muy bien eso de usar la scrollbar como control de slide, pero con una animación personalizada.

Lo que hay que aclararle a los que pasen a buscar ideas que esa página aún no está terminada. Los ajustes no andan en todos los navegadores, sólo en algunos casos sigue al resize, falta un botón para detener la música, hay que optimizar la carga ...

Y me parece que al final sí era ajustar siempre a lo ancho. Un punto importante es que te asegures que en cualquier navegador muestre las barras de desplazamiento (en Opera tuve algunos problemas, pero terminé usando el maus con su botón flotante, y la vi).

Donde además estuviste muy bien fue en extraer el código que te hacía falta. Como dije, cargar toda la librería para esto es un despropósito.
Pero el código que te puse funciona también para objetos y demás capas. Solamente hay que quitarle el ajuste por altura, que no lo necesitas, y el resto de las variables que agregué previendo que hubiese que seguir trabajando con más posibilidades.

Gracias

pues si la pagina esta aun en fase de desarrollo y me queda por ajustar muchas cosas XD

es verdad que en opera le cuesta moverla y en IE no quiero ni pensarlo XD

pero en fin cuando este terminada lo publicare si me permiten los administradores XD por si alguno le interesa

pero como el problema que tuve era ajustar el alto y ancho
pues dejo la funcion que permite hacerlo gracias a los ejemplos antes dados XD

Código PHP:

  function bgresized(iw, ih, width, height, minw, minh){ 
        var w=0, h=0, x=0, y=0, fRatio=0; 
        if(minw){ 
            if(width < minw ) width=minw; 
        } 
        if(minh){ 
            if(height < minh ) height=minh; 
        } 
         
        if (width > height) { 
            //console.log(iw, ih); 
            if (iw > ih) { 
                fRatio = iw/ih; 
                w = width 
                h = Math.round(width * (1/fRatio)); 
                var newIh = h; 
                if(newIh < height) { 
                    fRatio = ih/iw; 
                    h = height; 
                    w = Math.round(height * (1/fRatio)); 
                } 
            } else { 
                fRatio = ih/iw; 
                h = height; 
                w = Math.round(height * (1/fRatio)); 
            } 
        } else { 
            fRatio = ih/iw; 
            h = height; 
            w = Math.round(height * (1/fRatio)); 
        }     
        if (w > width) { 
            x = (w - width) / 2; 
        } 
        if (h > height) { 
            y = (h - height) / 2;     
        } 
         
        return {'w':Math.round(w),'h':Math.round(h),'x':Math.round(x),'y':Math.round(y)};          
}

Saludos

Lynxcraft · #10 (**permalink**) 17/07/2012, 02:07

Cita:

Iniciado por Lynxcraft

gracias por el aporte pero lamentablemente no me sirve

, el problema es que no tengo que distorsionar la imagen sino escalarla en proporción

lo que tengo que combinar es esto

el primero ajusta en caso de que fuera panorámica y el segundo en que el área sea mas vertical; ademas de que el área tiene que tener un mínimo de 1200 x 800 ; parece sencillo pero llevo dando vueltas toda la tarde XDXD