Estoy usando reaccionar sensible para crear consultas de medios para que cambie el tamaño de una imagen. Sin embargo, no está haciendo lo que quiero. Mantiene la primera imagen más grande en la pantalla y no cambia a la otra con las reglas que especifiqué. ¿Hay una forma diferente de codificar esto?
importar Reaccionar, {Componente} de 'reaccionar'; importar MediaQuery desde 'react-responsive'
class Name extends Component { render(){ return( <> <div> <MediaQuery Nameimg={this.props.Nameimg} minWidth={900}> <img height="15vh" className="name_image" src={this.props.Nameimg} alt="name"/> </MediaQuery> <MediaQuery Nameimg={this.props.Nameimg} maxWidth={899}> <img height="8vh" className="name_image2" src={this.props.Nameimg} alt="name2"/> </MediaQuery> </div> </> ) } } export default Name;
Esta fue una solución simple, así que espero que esto también sea útil para otra persona. Pero creo que no funcionó porque necesita usar anchos establecidos definidos por el paquete https://github.com/contra/react-responsive/blob/master/src/mediaQuery.ts#L9
Usé minWidth y maxWidth de 1224, que funcionó.