Estoy usando el componente React Bootstrap Card, y se ve bien en un navegador, pero en el móvil la imagen se aplasta horriblemente, así que pensé que probablemente se vería mejor si simplemente no la mostraba en el móvil.
function RowCard({title, sub_title, post_text, image}) { return ( <Card style={{flexDirection: "row"}}> <Card.Img style={{width: "25%",objectFit: "cover"}} src={image} alt="banner" />Como ejemplo, este es el comienzo de una función que produce un componente de Tarjeta dada una estructura con los argumentos relevantes. Traté de envolver la línea <Card.Img..> usando BrowserView de react-device-detect, pero esto hizo que la imagen fuera pequeña por alguna razón, e intenté importar isMobile desde el mismo paquete, pero no estaba seguro de cómo hacerlo. usarlo (simplemente haciendo if(!isMobile){<Card.Img...>} no funcionó).
¿Alguien puede proporcionar alguna idea de cómo hacer esto?
Gracias
puede editarlo con css usando la consulta de medios para el tamaño del teléfono
<Card.Img className="image" style={{width: "25%",objectFit: "cover"}} src={image} alt="banner" />
@media only screen and (max-width: 600px) { .image{ display: none } }puedes consultarlo aquí https://www.w3schools.com/css/css_rwd_mediaqueries.asp
pero también puede simplemente cambiar el tamaño de la imagen para que quepa en la pantalla del móvil y también es una buena práctica para diseñar un sitio web receptivo
Estas son también algunas de las consultas de medios para otros tamaños de pantalla.
/* Media Query for Mobile Devices */ @media (max-width: 480px) { body { background-color: red; } } /* Media Query for low resolution Tablets, Ipads */ @media (min-width: 481px) and (max-width: 767px) { body { background-color: yellow; } } /* Media Query for Tablets Ipads portrait mode */ @media (min-width: 768px) and (max-width: 1024px){ body { background-color: blue; } } /* Media Query for Laptops and Desktops */ @media (min-width: 1025px) and (max-width: 1280px){ body { background-color: green; } } /* Media Query for Large screens */ @media (min-width: 1281px) { body { background-color: white; } }