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