Versión reponsive en tabla con imágenes

[gattuna]

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 May 17, 2019 by gattuna (see edit history)

[gattuna]

Alguna idea de cómo arreglarlo? por favor?

[Aghnaya]

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. 
 

[gusman126]

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

 

[gattuna]

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!

[gusman126]

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.

 

[gattuna]

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! 

[gusman126]

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>

Aunque siempre es mejor usar "div" 

http://shoelace.io/

 

Edited May 20, 2019 by gusman126 (see edit history)

[manu20gm]

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

 

Un saludo.

[gusman126]

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 .

 

[gattuna]

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>

Aunque siempre es mejor usar "div" 

http://shoelace.io/

 

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

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!

[gusman126]

mejor de 3 en 3 o no se veran bien

incluso 2 en 2

[gattuna]

la 7ª foto la del gato Ragnar sale muy grande en móvil pero bueno mucho mejor que antes  mil gracias por la ayuda!!!!