Ajustar imagen con css

[mgocx]

Hola amigos como estas?!

Bueno vamos a "eso"!

Resulta que tengo un div con una imagen de fondo, cuyo "div" de be contener una imagen de 350px x 350px.
Entonces supongamos que tengo una imagen de 1920 x 1080 px, la idea sería intentar contenerla dentro de los 350 px x 350 px. centrar la imagen e intentar respetar la imagen aunque se pierda contenido.

Código CSS:

.imagen_post{
   width: 350px;
   height: 350px;
   display: block;
   background:url(la_img.png) center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
 

Esto es lo que tengo hasta ahora pero con imágenes grandes no se ajusta solo se centra.

Bueno espero que se entienda mi idea, muchas gracias de antemano!

[martinmiranda90]

Hola. No se si he entendido muy bien lo que quieres conseguir pero vamos a intentarlo. Tienes un div contenedor y ahi quieres poner la imagen como background y expandirla al tamaño establecido, correcto?. Si es asi, en la propiedad que tienes de background-size, si le cambias el cover por esto:

Código:

background-size: 100% 100%;

Debería expandir la imagen y quedar tanto ajustada como centrada ya.
Otra cosa que podrías hacer seria contener un <img/> dentro del div y ponerle un width y height del 100%,también funcionaría.

Un saludo y espero que sea lo que andas buscando

[memoadian]

Pues a mi me funciona tu método

aquí los dos ejemplos uno con cover y otro con 100%, personalmente prefiero el cover

si no te funciona es que tu navegador no soporta background size

http://jsfiddle.net/31s2t28q/

[mauritosuarez]

Con los 2 ejemplos puestos por memoadian, se ve mejor el cover ya que no deforma la imagen.

Pero queda en gusto y necesidad de cada uno.

Saludos.

[martinmiranda90]

Yo por eso mismo dije si había entendido bien lo que buscaba,ya que si busca que se vea la imágen íntegramente aunque se deforme debería poner el 100% en background-size, ya que cover no la deforma pero no la muestra toda.
A no se que tengas un navegador del año de María Castaña tendría que funcionarte.

Un saludo.

[pzin]

Para que salga la imagen entera se usa contain. De todas formas como ya dijeron cover te va a funcionar como estás buscando. Tendrás alguna otra cosa mal.