Jump to content

Versión reponsive en tabla con imágenes


Recommended Posts

Buenas!! 

estaba editando en mi web de mascotas una tabla con html en una página de Prestashop y le he asignado valores numéricos para el width y height, claro y en el PC muy bien pero luego en el móvil se ven solo 2 de las 7 imágenes que hay en la tabla.

Entonces he probado poniéndoles en vez de valores numéricos lo siguiente: 

style=" width:100%; height:auto"

y después de darle a OK al código parece que se autoajusta muy bien antes de guardar, pero guardo, y todo vuelve a como estaba, observo el código de nuevo y el height:auto sigue ahí pero el width="100%" desaparece, por qué pasa esto. ¿Cómo puedo conseguir ajustar estas imágenes para móvil también?

Este es el código como queda después de guardar:

<table style="height: 400px; width: 800px;">
<tbody>
<tr>
<td style="text-align: center;"><img src="https://dominio.es/...imagen.jpg" alt="valor" style="height: auto;" />
<p align="center"><strong>Nombre:</strong> valor</p>
<p align="center"><strong>Año Nacimiento:</strong> valor</p>
<p align="center"><strong>Raza:</strong> valor</p>
<p align="center"><strong>Carácter:</strong> valor</p>
<p align="center"><strong>Aficiones:</strong> valor</p>
<p align="center"><strong>Puesto:</strong> valor</p>
</td>

...

*He probado a quitar el estilo de la tabla <table style="height: 400px; width: 800px;"> y dejarla solo como <table> pero no cambia nada, sigue desapareciendo el width="100%"

Gracias de antemano!

Edited by gattuna (see edit history)
Link to comment
Share on other sites

Había algo para programarlo y que se ajuste con el tamaño de la pantalla con la que visualizasen. 

Pero como es de programación yo voy perdido y no te puedo ayudar.  :(

 

Lo siento. A ver si algún Gurú nos ayuda. 
 

Link to comment
Share on other sites

2 hours ago, gusman126 said:

los <img > siempre siempre añadir class="responsive"

 

Habría sido muy bonito que hubiera funcionado pero no :( , imagino que para que esto vaya previamente tendrá que tener asignado en el CSS que hace la clase responsive, o igual estoy diciendo una tontería porque no entiendo mucho de esto... gracias igualmente Aghnaya y gusman126!

Link to comment
Share on other sites

hace 46 minutos, gattuna dijo:

Habría sido muy bonito que hubiera funcionado pero no :( , imagino que para que esto vaya previamente tendrá que tener asignado en el CSS que hace la clase responsive, o igual estoy diciendo una tontería porque no entiendo mucho de esto... gracias igualmente Aghnaya y gusman126!

En todas las plantillas basadas en bootstrap deberia funcionar, 

pon enlace a la pagina y probamos.

 

Link to comment
Share on other sites

La tengo en mantenimiento la web para que no se vea pero la abro temporalmente para ver si veis algo que falle o se os ocurre alguna cosa. Le he añadido lo de responsive pero no funciona, he pensado que igual tenía que ver con que tengo ancho y alto asignados y los he quitado pero seguía igual pero además con las imágenes descuadradas, por lo que lo he vuelto a poner. También he visto que tenía la cache activada y la he desactivado pero tampoco:

https://mascoty.es/content/sobre-nosotros

(Es en la fila de las 7 imágenes de perros y gatos en la que estoy probando, aunque las de abajo también me tocará hacer lo mismo).

Muchas gracias por el interés! :)

Link to comment
Share on other sites

Prueba con esto :

<table class="table">
<tbody>
<tr>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/gatos%20ayron%20+%20ryo%20690x434.jpg" alt="gato Ayron y gato Ryo" class="img-fluid"></td>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/perra%20gato%20arwen%20ragnar%20690x434.jpg" alt="perra Arwen y gatito Ragnar" class="img-fluid"></td>
</tr>
</tbody>
</table>

image.png.b08afdbfdc33b34a03f0e7af5d320c8a.png

Aunque siempre es mejor usar "div" 

http://shoelace.io/

 

image.png

Edited by gusman126 (see edit history)
  • Thanks 1
Link to comment
Share on other sites

hace 3 horas, manu20gm dijo:

Prueba añadiendo a la imagen la clase img-fluid

 

Un saludo.

Con eso funciona, el problema esta en que tambien esta añadiendo tamaño a la table y alguna celda, debe quitarlas y añadir alguna class mas .

 

  • Thanks 1
Link to comment
Share on other sites

19 hours ago, gusman126 said:

Prueba con esto :


<table class="table">
<tbody>
<tr>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/gatos%20ayron%20+%20ryo%20690x434.jpg" alt="gato Ayron y gato Ryo" class="img-fluid"></td>
<td style="text-align:center;"><img src="https://mascoty.es/themes/at_petstore/assets/img/modules/appagebuilder/images/perra%20gato%20arwen%20ragnar%20690x434.jpg" alt="perra Arwen y gatito Ragnar" class="img-fluid"></td>
</tr>
</tbody>
</table>

image.png.b08afdbfdc33b34a03f0e7af5d320c8a.png

Aunque siempre es mejor usar "div" 

http://shoelace.io/

 

image.png

Muchas gracias gusman126!! Efectivamente funciona y las filas con 2 imágenes quedan genial! :D

Me quedaría el problema de que para la fila de 7 imágenes sin textos salen las 7 muy pequeñas, con textos solo me salen 3, pero quedan perfectamente esas 3 (puedes verlo en las pruebas que he hecho en la página). Por lo que si fueran 6 o 9 quedarían perfectamente cuadradas en filas de 3, o si fueran pares en filas de 2 también quedaría chulo, justo siendo 7 no sé cómo hacerlo para que quede bien XD

Pero bueno si se te ocurre algo genial y si no lo pongo en plan 3 / 3 / 1 y arreglado.

Muchísimas gracias por tu ayuda! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...