0

I´ve got a problem with an rotating image. The problem occurs on the iPhone in the Safari browser.

The left is the Version on the iPhone and the right one on an Android Smartphone with Google Chrome

You see the (badly) red circled image. On the iPhone it is rotated 90 degrees for no perceptible reason. The image above is displayed correctly on both browsers with exact the same HTML and CSS.

I´m using bootstrap css framework and this is how the images will be displayed:

<div class="col-lg-12" style="text-align: center; margin: 20px; background-color: rgba(255, 255, 255, 0); padding: 30px; border-radius: 20px;">
<div class="col-md-3">
    <img class="img-circle" src="../admin/uploads/categories/<?php echo $categoryRow["img"]; ?>" width="140px" height="140px">
</div>
<div class="col-md-9">
    <h2><?php echo $categoryRow['name']; ?></h2>
    <p><?php echo $categoryRow['description']; ?></p>
    <p><a class="btn btn-default" href="category.php?id=<?php echo $categoryRow['catID']; ?>" role="button">Mehr <?php echo $categoryRow['name']; ?></a></p>
</div>

On this page categories of different articles will be shown with an image (with the problem) plus a headline and description. This happens in a while() which is done by PHP.

The thing is I want to know why the image is rotated on the iPhone, this should not be. The website works perfect on the Android browsers and on Desktop PCs. Just on iOS and Safari this mysterious thing appears. I really hope you can help me with this problem.

Happy Sunday and thanking you in anticipation :)

Philipp Schemel
  • 943
  • 8
  • 19
  • How was the image created, and what type is it? Some images have embedded orientation information and it may be that iOS is respecting the orientation setting and other devices are not. – Duncan C Nov 01 '15 at 15:39
  • Wow, its very interesting. I now opened the picture in my chrome browser and in fact it is like the way it is displayed on the iPhone. But now the question is, why does the Google chrome and all other browser except the iPhone display it the right way, even if the image is not the right way? – Philipp Schemel Nov 01 '15 at 16:48
  • Not that many image display engines pay attention to the orientation info. For those that don't, the image is shown in the orientation of the pixel data. For iOS, and the Chrome browser, it looks at the orientation metadata and rotates the image before display. that fixes the problem of posting portrait images from your DSLR on the web and having them show up sideways. – Duncan C Nov 01 '15 at 21:14

1 Answers1

1

It is not problem of bootstrap image-circle. It is problem of image's exif data. Please see How to prevent auto-rotating images on iOS on HTML with CSS/Javascript

Community
  • 1
  • 1
hungit
  • 26
  • 1