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?
    – Jaime
    Commented 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.. Commented 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, Commented 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 you have read our privacy policy.

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