Tengo una web que me está dando problemas con la anchura de las imágenes. Os cuento:
Estoy haciendo una responsive web para autoajustar toda la información a la resolución y tamaño de la pantalla, sea pc, tablet o movil (aun no he tenido tiempo de crear el mediaquerys).
Todo funciona bien menos las imágenes, se ajustan los div, body.... a cualquier tamaño, pero las imágenes no consigo que se ajusten y como consecuencia me cambia toda la apariencia de la web.
Esta es la imagen del formulario de contacto que está en una tabla con dos columnas: en la izquierda tengo una imagen con datos de contacto y en la derecha un formulario de contacto. Así es como queda y debe quedar
http://es.scribd.com/doc/217798636/pant2-pdf
Y cuando cambio la ventana del navegador mismo me ajusta todo menos las imagenes y la tabla, así queda cuando cambio el tamaño o lo veo por el movil:
http://es.scribd.com/doc/217798573/pant1-pdf
En un principio pensaba que era por la tabla y empecé a trabajar por ahí, pero el resto de imagenes de la web me hacen lo mismo. Si cambio el tamaño de la pantalla se me ajusta todo menos las imagenes, con lo cual no se me ajusta bien.
Este es el código donde está la imagen
Código HTML:
<section> <table width="90%" border="0" cellspacing="5" cellpadding="5" style="margin:auto 40px 40px auto; font-size:20px"> <tr> <td width="40%" align="center" valign="top"> <img src="imagenes/Logo_sin_fondo.png" /><br /><br /> <strong><em><a href="https:#" title="Facebook del Campeonato" target="_blank">facebook</a></em></strong><br /> <strong><em><a href="http:#" title="Twitter del Campeonato" target="_blank">twitte</a></em></strong><br /> <a href="mailto:mi_email?subject=Mensaje para SummerEnd Hip Hop" title="Enviar un eMail">mi_email</a><br /> <strong><em><span style="text-shadow: 0.1em 0.1em 0.1em #FF3">Phone: XXXXXXXX</span></em></strong><br /><br /> <img src="imagenes/LogoRaul.png" width="200" height="75" /><br /> </td> <td width="60%" align="right"> <h2 align="center">¡ Envía tu consulta !</h2> <table width="100%" border="0" cellspacing="5" cellpadding="5"> <form id="contacto" name="contacto" method="post" onsubmit="return formulario(this)" action="MailHandler.php" > <tr> <td> </td> <td> </td> </tr> <tr> <td width="30%" align="right" valign="middle"><label for="nombre">Nombre: </label></td> <td width="70%" align="left" valign="middle"><input name="nombre" type="text" id="nombre" placeholder="Nombre completo" size="49" /></td> </tr> <tr> <td align="right" valign="middle"><label for="email" style="text-align:left">eMail: </label></td> <td align="left" valign="middle"><input type="text" name="email" id="email" placeholder="[email protected]" size="49" /></td> </tr> <tr> <td align="right" valign="middle"><label for="telefono" style="text-align:left">Teléfono: </label></td> <td align="left" valign="middle"><input name="telefono" id="telefono" placeholder="" size="49"></td> </tr> <tr> <td align="right" valign="top"><label for="mensaje" style="vertical-align:top">Mensaje: </label></td> <td align="left" valign="top"><textarea name="mensaje" cols="38" rows="5" id="mensaje" placeholder="Escribe aqui tu mensaje"></textarea></td> </tr> <tr> <td> </td> <td align="right" valign="bottom"><input type="submit" class="boton" value="Enviar mensaje" style="height:40px; margin:0 25px 0 0; cursor:pointer"></td> </tr> </form> </table> </td> </tr> </table> </section>
Código CSS:
Ver original
.container { width: 80%; margin: 30px auto; } header { height: 308px; margin-bottom: 30px; } .content { width: 100%; float: left; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; opacity: 1;/*Cambiar a 0.89 para combinar con el fondo mas opaco*/ margin-bottom: 40px; background-color: #c2dcee; } header, section, footer, aside, article, figure { display: block; width: 100%; }
¿Alguna idea?
Gracias de antemano
Raúl