[SOLUCIONADO] Problema con redimensión de imágenes

[Kirguiso]

Hola a todos de nuevo!

A ver os traigo una pregunta que es de nota, pero no de nota por la dificultad sino por llegar a entender lo que os voy a plantear.

A ver tengo esto

http://www.cssdesk.com/3h9AR

¿Qué ocurre?, que las imágenes se ven mal, es decir, en la primera posición cuando tengo las 4 se ven perfectamente pero al ir cerrando la pantalla se van deformando.

Entiendo a la perfección que por la manera que lo tengo montado se tengan que deformar. Si le pongo en auto no se deforman pero se ven "gigantes".

Lo que me gustaría, si se pudiese, es que al ir cerrando la página las imágenes como que se recortasen para que no quedasen deformadas y encajasen en el cuadro.

A ver lo que yo quiero es que la "galería" ocupe siempre 930px de ancho (el ancho del body) y que las imágenes no se deformen estén en la posición que estén.

¿Qué se os ocurre que puedo hacer?

Miles de gracias máquinas!

[AngelKrak]

no se ven las imágenes amigo ._. podrías mostrar una captura de tu error?

[Kirguiso]

No hace falta verlas! se deforman sin más

[AngelKrak]

haslas background y ponle background size cover ;)

[Kirguiso]

Okis AgelKrak miles de gracias pero...

Ahora me ocurre una cosa... no me sale el poner background-image.

Quiero hacerlo pero sin divs, se puede?

HTML

Código HTML:

<img class="miniatura" src="images/hola.jpg"> 

CSS

Código HTML:

.miniatura {
	width: 100%;
	height: auto;
}

Eso es lo que tengo y no sé como hacerlo... nada de lo que veo por ahí me funciona...

joer y eso que parece fácil.

Mil gracias máquina!

[MrGilbertMan]

<div style="width:930px">

<img src="" style="width:90%" />

</div>

Hola buenas no sé si te entendí bien, prueba esto.
No hace falta que pongas height:auto, eso sobra, si marcas una anchura a la imagen la altura es escalar.

[Kirguiso]

Gracias probaré eso MrGilbertMan

Y lo de poner background-image cómo se hace no me sale

yo pongo

background-image: url ("images/hola.jpg");

esto así y no me sale nada...

Gracias

[MrGilbertMan]

ten en cuenta que la ruta empieza donde tengas alojado el css

si tu árbol de directorios es

/
/css
/images

para acceder a una imagen desde un css sería algo así:

background-image: url ("../images/hola.jpg");

[Kirguiso]

Gracias MrGilbertMan pero... y en el HTML qué tengo que poner?

Joer es algo sencillo y cómo me está costando!

Gracias!

[MrGilbertMan]

en el html?

tu en el css creas la clase con el background-image, implementa el css en el html y al div le asignas la clase.

Código CSS:

.mi_clase
{
    background-image: url ("../images/hola.jpg");
}
 

Código HTML:

<div class="mi_clase">
</div>
 

[AngelKrak]

Kirguiso, seria asi ;) suponiendo que los estilos los tengas dentro de una carpeta(CSS), aparte del index ;)

PRINCIPAL(Carpeta)
Index(Principal)
-CSS(Carpeta)
--Estilos.css(Dentro de CSS)

HTML:

Código HTML:

<img src="" style="background-image: url("../img/imagen.png");" />
 

CSS:

Código CSS:

img {
background-image: url("../img/imagen.png");
}
 

[Kirguiso]

Modo locura nivel leyenda!!

A ver aquí me funciona

http://www.cssdesk.com/3h9AR

Ahí podéis ver un ejemplo y en local en el ordenador no me funciona... PQ??

Gracias a todos por vuestra paciencia y ayuda!

[AngelKrak]

no te funciona el css? debes de tener mal la ruta, a mi si me funciona bien ;)

[Kirguiso]

Vamos que nos vamos!!!!

Sabéis que pasaba que en height lo ponía en auto y por eso no se veía.

grrrrr!! Le solucionado!!

Millones de gracias fenómenos!!!

[Kirguiso]

Pero ahora más problemas al insertar la imagen mediante CSS me sale un marco en la imagen y por mucho que le ponga width 100% al hacer más pequeña la página la imagen se me corta.

pq? Como puedo hacer que no me aparezca ese marco y que la imagen ocupe el 100% sin cortarse?

Muchas gracias... poco a poco va saliendo.

[AngelKrak]

marco? podrias mostrar una captura de como te sale?
igual y tienes un borde establecido y parece un marco jejeje xD

[Kirguiso]

Vale, el "marco" ya lo he conseguido quitar pero ahora hay otra cosa más jeje.

Cuando pones una imagen desde el HTML y desde el CSS le pones width:100%;height:auto; ella sola se hace responsive y según cierras la pantalla se va haciendo pequeñita pero...

cuando insertas la imagen mediante CSS eso no ocurre. ¿Cómo puedo hacer para que ocurra igual?

Gracias!

[AngelKrak]

no entendi a que te referistes con eso ._. podrias explicarte mejor? y si tienes captura del error mostrarla?

[MrGilbertMan]

Preuba algo así:

Código CSS:

background-image: url("images/imagen_pequena.png");
background-repeat: no-repeat;
background-position: center center;
 

y utiliza un editor gráfico para redimensionar las imágenes al tamaño adecuado.

si le sale un borde a la imagen prueba añadir border:0 al css.

[Kirguiso]

MrGilbertMan

Gracias, por ahora, lo que me has dicho me funciona.

Pero el marco... que creía haberlo solucionado nada.

Lo que os comento del marco es lo que hablan en esta web... pero... dicen también lo del border:0 y a mi no me sale. Ni con 0 ni con none

http://www.cssblog.es/borde-en-las-imagenes-con-css/

background-image: url("imagenes/imagen1.jpg");
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 195px;
border: 0;
}

eso es lo que tengo escrito.

Gracias a todos máquinas!

[Kirguiso]

Me salían pq lo hacia con <img class=""> al hacerlo con divs perfecto.

Muchas gracias a todos!