• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Image Help needed - should I rotate or what for mobile?

Contributor ,
Sep 11, 2018 Sep 11, 2018

Copy link to clipboard

Copied

Hi all,

I am trying to create a simple page that displays one image on Mobile phones.

This image is landscape and roughly: width="600" height="240"

If I add an image tag like:

<img src="mypic.jpg" width="600" height="241" alt=""/>

portrait view...

it shows up too wide in portrait view - so you have to scroll left and right to see all of it. (not that great)

landscape view...

if you rotate the phone to landscape - it is just about full screen in landscape view. This is basically what I want.

Also it's upright in both views.

I am wondering if I can can set it up to start as already rotated in portrait mode which should encourage people to try to rotate their phone to see the better view.

I tried transform: rotate(90deg) but couldn't get it to show correctly (odd size - not left alight etc.)

Is there a good way to set this up?

Views

978

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 11, 2018 Sep 11, 2018

Copy link to clipboard

Copied

LATEST

The only way to show an image in different clients and rotations is to apply relative widths and or heights. Have a look at How To Create Responsive Images

As far as forcing the image to be rotated in mobiles, this is counteractive. Mobile users know to turn their devices to get the best view for portrait aligned images.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines