CODEWITHSUNDEEP
htmlioscssimagetwitter-bootstrap
Philipp Schemel
Philipp Schemel

Reputation: 1051

Bootstrap image-circle is rotated on iOS

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 :)

Upvotes: 0

Views: 1385

Answers (1)

hungit
hungit

Reputation: 26

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

Upvotes: 1

Related Questions