I am facing an issue with displaying images in a div of various resolutions. When I have a wide image with low height, such as 730x90, it does not show properly on mobile devices. The width shrinks but the height remains the same. Below is the code snippet (I am using CSS within React for this example). The syntax may vary, but the problem lies in the display on mobile devices. The child element is a span containing a single img.
parent: {
'@media(max-width:744px)': {
minWidth: '100vw',
},
'@media(max-height:823px)': {
minHeight: 'auto',
}
},
child: {
'@media(max-width:744px)': {
maxWidth: '80vw',
maxHeight: '100vw',
width: 'auto',
height: 'auto',
display: 'block',
margin: 'auto'
}
}