CODEWITHSUNDEEP
htmlcssimageimage-processing
Arpit Patidar
Arpit Patidar

Reputation: 69

Image showing rotated anticlockwise in website

Today I encountered a new issue. when I uploaded the image it shows rotated anticlockwise (-90deg). I thought it has issues with orientation so I tried adding this css image-orientation: from-image; but it doesn't worked.

HTML code:

<section class=" parallax-section content-parallax-section" data-scrollax-parent="true">
<div class="bg" data-bg="includes/images/bg/2.jpg" data-scrollax="properties: { translateY: '200px' }" style="background-image: url(&quot;includes/images/bg/2.jpg&quot;);"></div>
</section>

Related Css Classes

.bg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1;
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat:repeat;
    background-origin: content-box;
}
section.parallax-section.content-parallax-section {
    padding:150px 0;
}

original Image link: http://test.dvinsconceptzion.com/demo/includes/images/bg/2.jpg
webpage link: http://test.dvinsconceptzion.com/demo/about.php#sec5

It could be also after upload the image header having some issue. but I am not sure coz this is the first i am having issues with image orientation.

Thanks

Upvotes: 0

Views: 157

Answers (3)

Dimas Pante
Dimas Pante

Reputation: 2521

This is usually connected to the image EXIF. There are some things you can do:

  1. You could try removing it from the image (Windows):

    • Right-click anywhere within the selected fields and choose “Properties.”
    • Click the “Details” tab.
    • At the bottom of the “Details” tab, you’ll see a link titled “Remove Properties and Personal Information.” Click this link.
    • Windows will ask whether you want to make a copy of the photo with this information removed, or if you want to remove the information from the original. Choose the option you prefer and click “OK.”

Source: https://us.norton.com/internetsecurity-how-to-how-to-remove-gps-and-other-metadata-locations-from-photos.html

  1. You can use a tool to rotate it and save again in the same orientation (like Photoshop or even Windows image viewer);

  2. Or you can modify your uploader to add an exif_read_data() (if you're using PHP) to check the orientation and rotate it whenever needed. This answer could help: https://stackoverflow.com/a/34287543

Upvotes: 2

Oleg Om
Oleg Om

Reputation: 439

Make    Apple
Model   iPhone 6 Plus
Orientation Rotate 90 CW
XResolution 72
YResolution 72
ResolutionUnit  inches
Software    10.3.2
ModifyDate  2017:07:20 12:12:58
YCbCrPositioning    Centered
ExposureTime    1/33
FNumber 2.2
ExposureProgram Program AE

Rotation recorded in EXIF data

I attach the link with the changed data

Orientation Horizontal (normal)

Upvotes: 1

MahmouD Skafi
MahmouD Skafi

Reputation: 370

U can use 

transform: rotate(90deg);

to rotate the image

Upvotes: 0

Related Questions