Adaptando las imágenes

¡Hola!

Parece que estás en el camino correcto al pensar en usar width: 50%; para que las imágenes ocupen la mitad del ancho de la pantalla, lo cual es una buena práctica para asegurar la responsividad en diferentes dispositivos. Usar porcentajes es una forma efectiva de hacer que el diseño se adapte a diferentes tamaños de pantalla, ya que el tamaño de la imagen se ajustará proporcionalmente al contenedor en el que se encuentra.

En cuanto a tu curiosidad sobre variables dinámicas, en CSS puedes utilizar variables CSS (también conocidas como custom properties) para definir valores reutilizables. Por ejemplo:

:root {
  --image-width: 50%;
}

img {
  width: var(--image-width);
}

Esto te permite cambiar el valor de --image-width en un solo lugar y aplicarlo a todas las imágenes que usen esa variable, lo que es muy útil para mantener un diseño consistente y fácil de actualizar.

Espero que esto te ayude a entender mejor cómo adaptar las imágenes de manera responsiva. ¡Espero haber ayudado y buenos estudios!