Opening image on mobile pre-rotaded

HTML & CSS
1

Hello.

On a website I have a link to a image. When I open this link/image on mobile I want it to be “pre-rotated”. Even if I have not rotated the mobile phone, I want the picture to be displayed in the way it had been shown if the mobile had been rotated. (full width, full height and lying down) Can someone help me?

Best regards
Neo

2

Hi there qrazyneo1,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

img {
    display: block;
    margin: auto;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

@media ( max-width:30em ) {
img {
    width: 59vw; 
    height: 94vw;
    transform: rotate( 90deg );
    box-shadow: 0.4em -0.4em 0.4em rgba( 0, 0, 0, 0.4 );
  }
 }
</style>

</head>
<body>

<img src="https://coothead.co.uk/images/statue3.jpg" width="264" height="418" alt="statue">

</body>
</html>

coothead

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.