[SOLUCIONADO] Sacar imagen de un div

[seravifer]

Tengo un div con la propiedad overflow:hidden y dentro de el hay un imagen. El div tiene un ancho y la imagen es mas grande que se ancho. Lo que quiero es que la imagen salga del div y no se alargue pero sin salirse. Me explico, la imagen salga del div ya que ahora es como si se metiese por debajo del fondo, muy raro.

[pzin]

Iniciado por seravifer

Lo que quiero es que la imagen salga del div y no se alargue pero sin salirse.

¿Cómo?

Deberé de estar espeso, más de lo habitual, porque no entendí nada.

De todas formas, si puedes poner el código CSS y HTML (sin PHP ni otros ingredientes) igual se podría ver lo que comentas.

[seravifer]

Código HTML:

<div id="wrapper">
<img width="1000px">
</div>

#wrapper {
owerflow:hidden;
width:900px;
}

El div tiene mas contenido pero lo que quiero es que la imagen salga del div. En mi web al probar este código la imagen no se sale si no que parece que se esconde.

[pzin]

Suponiendo que en tu web tengas overflow (y no owerflow) es normal que eso pase, ya que indicas que el contenido que sobresalga (overflow) se esconda (hidden).

Si quieres que el contenido que sobresalga se muestre, entonces quita esa propiedad ¿no?

[seravifer]

Ya pero si quito esa propiedad el div no detecta que hay contenido dentro. Esto es lo que use [URL="http://librosweb.es/css_avanzado/capitulo_1/limpiar_floats.html"]http://librosweb.es/css_avanzado/capitulo_1/limpiar_floats.html[/URL]

No hay ninguna forma pues. O alguna alternativa.

[pzin]

Iniciado por seravifer

Ya pero si quito esa propiedad el div no detecta que hay contenido dentro. Esto es lo que use http://librosweb.es/css_avanzado/capitulo_1/limpiar_floats.html

No hay ninguna forma pues. O alguna alternativa.

Si la hay, claro. Pero sin saber la necesidad de ese overflow...

Para limpiar el flotado puedes meter otro elemento y ponerle a ese un:

Código CSS:

clear: both;
 

O en lugar de de eso, aplicarle al elemento contenedor (el que ahora tiene ese overflow) un micro clearfix:

Código CSS:

#contenedor:before, #contenedor:after {
  content: " ";
  display: table;
}
 
#contenedor:after {
  clear: both;
}
 

[seravifer]

Para limpiar el flotado antes usaba el método de clear:both; pero me parecía muy chapuza por eso use el overflow. He mirado el hack ese pero lo veo bastante extraño ya que hablando de css debería ser muy fácil por hacer lo que quiero. De todos modos lo probare. Si sabes algún otro método lo agradecería.

Muchas gracias por todo, se agradece.

[pzin]

Es que hay tres formas de eliminar el flotado. El de meter un elemento con clear, el clearfix que es el de meter un overflow y este último que es el llamado micro clearfix, que es el que yo siempre uso y que soluciona el problema de los elementos que sobresalen.

El primer método es sucio, el segundo da este problema que tienes y el tercero es todoterreno.

De hecho yo lo meto todo en una clase, bueno yo y es la práctica habitual supongo, que con SASS queda una monada tal que:

Código CSS:

.cf:before, .cf:after
  content: " "
  display: table
  &:after
  clear: both
 

Luego simplemente añades una clase (cf que es de clearfix) al elemento que contiene los elementos flotados y ya está.

Yo lo veo bastante limpio, no problemático y elegante.

Al final estos tres métodos son realmente cómo ha ido evolucionando la forma de limpiar los flotados.