Tengo un sitio web receptivo creado con bootstrap y sass. Cargo la imagen de fondo en la página de inicio dinámicamente usando puntos de interrupción de arranque en sass.
En la misma página tengo otras imágenes que cargan mucho. Creé una forma de cargar imágenes en función del width , de modo que <img src='assets/img/myImage?width=500'> para reducir el tamaño en función de la ventana gráfica. Pero no pude encontrar una manera de controlar el src de la etiqueta img en el archivo sass, así que uso la consulta @media y decido el width dinámicamente.
¿Alguna idea de cómo implementar esto?
no puedes
Las imágenes son contenido, no estilo. No puedes usar CSS para cambiarlos.
Puede usar consultas de medios para cambiarlos, pero necesita usar un elemento <picture> para hacerlo, no CSS.
Aquí hay un ejemplo de MDN:
<picture> <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)"> <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" /> </picture>