Estoy haciendo un pequeño proyecto de tarjeta de revisión.
Obtuve la funcionalidad de la tarjeta y cómo quiero que todo esté colocado. El problema es que quiero que todas las imágenes mantengan el mismo tamaño sin tener que configurar consultas de medios cada 150-200px.
Sé que puedo obtener el ancho/alto inicial de las imágenes sin problema. Pero si configuro las imágenes en un tamaño inicial, ¿hay alguna forma de escalarlas desde ese tamaño inicial con, por ejemplo, el ancho de la ventana gráfica o la altura de la ventana gráfica? Todos tienen la misma relación de aspecto, así que encontré un tamaño que funciona para todas las imágenes como el tamaño inicial
Para aquellos que buscan una solución similar, hice una parte fuera del código, ya que lo hizo mucho más fácil. Solo recorté las fotos y las puse todas en la misma relación de aspecto para comenzar.
Luego pude establecer un ancho inicial en mis imágenes a una longitud de píxel.
Luego use las consultas de @media para mantenerlas escaladas correctamente para pantallas más grandes, solo tuve que hacerlo para 4 tamaños de pantalla diferentes para mantener el diseño adecuado.
Ejemplo:
image { width: 300px } @media screen only and (width: 1920px) { width: 800px }