need HTML or CSS code to display images in landscape orientation if on a mobile device

Question

I have certain rectangular images that I would like to display in landscape orientation if a mobile device is detected.

Images typically are 1600x800 pixels or some similar aspect ratio. A square image (200x200) on the main page leads to the higher res images when clicked or tapped on. These higher res images are what I want to display in landscape mode.

There is a backlink. When this is clicked, it goes back to the page in portrait orientation.

I do not need to lock the landscape orientation but I do need the capability to display the image in landscape if the device is rotated that way. Here is an illustration of the problem: I should also add that removing all the text and just posting the picture leads to the same problem: portrait orientation only.

The CSS coding for this page makes use of the MDN Web docs on orientation. I implemented them but no change. These docs have an issue/problem which has now been reported to MDN.

My CSS for this page is as follows:

/* style for CoinPages  */
* {
/* margin: 1rem; */
padding: .25rem;
/*  outline: solid black 2px;  */
box-sizing: border-box;
}

body {
/* display: flex; */
}

@media (orientation: landscape)
{
body {
margin: .5rem;
padding: .5rem;
background-image:
url('..< truncated here ***.jpg');
background-size: auto;
img {
border:  1px;
background-color: transparent;
}
}
}

p {
color: black;
text-align: center;
font-family: Times, Times New Roman, serif;
font-size: 1.0rem;
padding: 1rem;
}

font {
font-family: Times serif;
text-align: center;
height: 1.1rem;
padding: 0rem;
margin: 0rem;
/* background-color: transparent; */

box-sizing: border-box;
outline: solid firebrick 2px;
background-color: white;
opacity: 0.9;
}

.auth {
font-size: .9rem;
color: #404404;
}

An example of a page with the images I want to display is: main page An example of the image I wish to display in landscape for mobile is: Image example, here 1100x600