Hacer que una imagen cubra la totalidad de un contenedor sin usar porcentajes

Iniciado por eduardo(...)brutaldeath, 3 Marzo 2014, 22:33 PM

0 Miembros y 1 Visitante están viendo este tema.

eduardo(...)brutaldeath

Hola,

Tengo una pregunta y una consulta

Primero la pregunta
Tengo una imagen que quiero ocupe el 100% de un contenedor; sé que si le pongo 100% a mi contenedor y 100% a la imagen se solucionaría el problema, sin embargo, no puedo hacer eso, no debo hacerlo, por un motivo que es muy largo de explicar, pero que tiene sustento. Sólo les puedo decir que me gustaría saber una manera de hacer eso, es decir que mi imagen cubra mi contenedor totalmente, sin utilizar los porcentajes. Estaba pensando que podría hacerlo poniendo la imagen como fondo de mi contenedor para luego agregarle a la propiedad BACKGROUND el valor NO REPEAT, pero lo único que consigo es un espacio en blanco en el lado sobrante. ¿alguien sabe cómo se puede solucionar este problema?

Ahora la consulta
Tengo un slider de 5 fotos y en cada foto debe aparecer en la parte de abajo una descripción. Primero creé unos divs con texto y los posicioné en ABSOLUTE, luego los mandé a la parte inferior pero, luego me di cuenta de que la animación JQUERY era más lenta con los divs, así que los quité y comprobé que por alguna razón mi teoría era cierta... ahora estoy pensando en trabajar la imagen con un programa de diseño gráfico e imprimir texto en la misma. El problema es que yo sé que, por cuestiones de SEO no es recomendable hacer eso, así que pensé en consultarles a ustedes, como les dije es la única manera de que la animación corra más rápido, quiero saber si es tan grave hacer esto o si no debo ser tan dramático; por si les interesa, las descripciones que van en las imágenes son sobre los departamentos que vende una constructora, nombres, precios, ambientes, etc.



POSDATA: Pienso que podría agregar las descripciones de la imagen en los atributos ALT y TITLE, así recuperaría algo de SEO.

engel lex

la primera cosa, podrías redimensionar con jscript y listo, por css podrías usar background size, pero ya caeríamos en 100% nuevamente

la segunda cosa, podrías usar el texto en un div y la imagen como background de ese div, así se comportaría al unísolo, si lo haces con el texto en la imagen tampoco es que "pierdas SEO" no es como si fueran puntos en un videojuego, una de las cosas importantes que te ubicará arriba en los buscadores será contenido original y visitas redirigidas desde el buscador
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.

eduardo(...)brutaldeath

Cita de: engelx en  3 Marzo 2014, 22:42 PM
la primera cosa, podrías redimensionar con jscript y listo, por css podrías usar background size, pero ya caeríamos en 100% nuevamente

la segunda cosa, podrías usar el texto en un div y la imagen como background de ese div, así se comportaría al unísolo, si lo haces con el texto en la imagen tampoco es que "pierdas SEO" no es como si fueran puntos en un videojuego, una de las cosas importantes que te ubicará arriba en los buscadores será contenido original y visitas redirigidas desde el buscador

¿Con redirigidas te refieres a que, ponga links de mi página en facebook, youtube, yahoo y todas esa página conocidas, para que google piense que mi web es importante?

Con respecto a lo otro, ¿o sea que no hay algo de malo en poner texto en una imagen?

engel lex

no, redirigidas desde google me refiero (cuando te buscan y entran a tu pagina)... lo importante para un buen SEO es buen contenido y flujo de usuarios es a lo que me refiero, no te mates con super tecnicas de SEO porque google cambia el algoritmo cada cierto tiempo y las técnicas que explotan su motor quedan baneadas y mandan las paginas para abajo... si estás arriba legítimamente, ahí te mantendrás... la cosa también es como te busquen... si tu pagina tiene un nombre caracteristico ayuda mucho, por ejemplo no puedes esperar tener la pagina "pollofrito.com" y quedar de primero fácilmente, ya que es un termino de búsqueda común para cosas posiblemente no relacionadas contigo, en cambio por lo menos una pagina que veo por ratos es fino filipino, es fácil de recordar y es difícil dar con muchos términos similares
El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.

dainodaibouken

1 .- no veo otra forma de hacerlo mas que o cambiando la imagen y redimensionarla a los pixeles de DIV o aplicando proncentajes. te queda el espacio en blanco por que la imagen no acapara todo el div.

2.- lo de la rapidez del jquery... uhm yo siempre lo eh usado asi y no veo alguna lentitud alguna. talvez sea la forma en que lo estas aplicando.

saludos.  :P

basickdagger

no se por que no utilizar porcentajes... pero puedes utilizar esto..

Código (html4strict) [Seleccionar]
<div id="contenido">
   <img src="miimagen.png">
</div>


y en tu css

Código (css) [Seleccionar]
#contenido img { width:100%; }
/* cuando el contenedor llegue a 900px la imagen tomara por defecto 900px de width, si se hace grande la pantalla, la imagen volverá a tomar el 100%*/
@media (max-width: 900px) {
#contenido img { width:900px; }
}


de esta manera si el sitio es abierto en una resolución mayor a 900px tomara todo el ancho de pantalla si llega a 900px o menos, automaticamente tomará la imagen 900px y ya no cambiara de ese tamaño si se sigue disminuyendo, al contenedor puedes aplicarle la misma propiedad solo quitale img del style... saludos