0

buen día a todos;

Estoy haciendo una plantilla con el elemento tabla con 5 columnas, con un ancho definido en porcentajes a 20% cada 1 y en algunas celdas tengo que insertar imágenes.

El problema es que si la imagen es muy grande hace que la celda se expanda y por tanto también la columna entera y me perjudica en otras cosas (lo cual creo que solucione insertando la imagen como fondo de la celda y no con un elemento IMG dentro de la celda y así evitar que modifique el tamaño de la columna)

#celda4{ 
         background-image: url("'.$urlImgPrincipal.'");  
         background-size: cover;
    }

Pero ahora el problema es que si la imagen es mas grande que la celda, solo se muestra una porción de la imagen

lo que muestra la celda: introducir la descripción de la imagen aquí

como es en realidad toda la imagén: introducir la descripción de la imagen aquí

Quiero que la imagen al ponerla de fondo de la celda se adapte al tamaño y se pueda ver toda pero no se como. O en caso ¿Como puedo obtener el tamaño de la celda antes de dimensionar un elemento img que este dentro de este? para así asignarle un tamaño al img en su width y height correspondientes a la celda

3
  • O sea ¿Quieres que la imagen se deforme? Porque si no cabe en la celda, pero tampoco quieres que la celda se agrande, no sé cómo le quieres hacer. ¿Probaste background-size: contain? el 4 may. 2022 a las 23:40
  • 1
    Buenas noches, siempre es mejor si pasas al menos el mínimo código necesario para poder hacer pruebas, en cuanto a la imagen si la pones como img en el contenedor y le das un width de 100% a la imagen debería ser suficiente para que esta se adapte al ancho de su padre.. el 5 may. 2022 a las 0:45
  • Como dice Luis S. Romero si pones una parte del código donde podamos apreciar lo que quieres hacer es más fácil replicar el comportamiento y ayudar te. saludos, el 5 may. 2022 a las 20:28

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.