Image rotating automatically

Asked

Viewed 414 times

1

Guys, I have a little problem with my HTML/CSS... Some large-sized images are rotating themselves...

Below is a print for you to understand better:

inserir a descrição da imagem aqui

Note that the first two images are in the correct position, but the third and fourth are turned... and when I upload they are in the correct position...

Follows my source:

<div id="usr-image" class="img-thumbnail img-responsive small-spacer" style="width:100%; height:200px; background-image:url(foto-perfil/'.$fetch['id'].'-profile.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; cursor:pointer;">
  <p style="color:#FFF; font-size:14px; margin-top:165px;"><b>'.$nome[0].', '.$idade.'</b></p>
</div>

Stand by please, abs.

html css html5 css3

  • Dude, first I suggest you remove all this style attribute and make these changes in a .css. file Also try inserting the photo usango the <img> tag instead of inserting using background.

  • Hi Felipe, already used the tag img.

  • Behold that fiddle how you can make the images flow. And in this example I highlighted it so you can better understand how it works.

  • Now the problem you’re having is not a CSS issue, it’s because it was saved lying down, if you open the image individually by right-clicking on "open image in a new tab", you’ll see the actual picture situation, this happened probably because the person who sent the image had her saved lying on the cell phone.

  • There are solutions that can detect face and position your image, see here or here in this example.

  • Here the lib on github and another example

  • When uploading an image, it is also possible to create a preview of the image, where it manually Rotacione as it wants, will only require a little more work, but will solve your problem.

Show 2 more comments

2 answers

1

Open the image of Ctrl+r until it is in the right position save and use in your html.

I’ve had this problem and so it solved

a good practice would be to put the images in <img src="" ...> and css in a separate file.

The simpler the code, the better, so you or someone else will be servicing it in the future.

Ex of how I organize my html

insira o código aqui   <div class="gallery autoplay items-3 ">
            <div id="item-1" class="control-operator"></div>
            <div id="item-2" class="control-operator"></div>
            <div id="item-3" class="control-operator"></div>

            <figure class="item">
                <div class="flex">
                    <div class="itemCaroucel"><img class="" src="imagem/Escala-Hiper-Brinquedos-Postagem-1-1024x1024.jpg" alt=""></div>

                    <div class="itemCaroucel"><img src="imagem/Escala-Hiper-Brinquedos-Postagem-1-1024x1024.jpg" alt=""></div>

                    <div class="itemCaroucel"><img src="imagem/Escala-Hiper-Brinquedos-Postagem-1-1024x1024.jpg" alt=""></div>
                </div>
            </figure>

            <figure class="item">
                <div class="flex">

                    <div class="itemCarousel"><img src="imagem/Escala-Hiper-Campanha-Material-Escolar-Postagem-1024x1024.jpg" alt=""></div>
                    <div class="itemCaroucel"><img src="imagem/Escala-Hiper-Campanha-Material-Escolar-Postagem-1024x1024.jpg" alt=""></div>
                    <div class="itemCaroucel"><img src="imagem/Escala-Hiper-Campanha-Material-Escolar-Postagem-1024x1024.jpg" alt=""></div>


                </div>
            </figure>

            <figure class="item">
                <h1>3</h1>
            </figure>
            <br><br><br><br><br>

            <div class="controls">
                <a href="#item-1" class="control-button">•</a>
                <a href="#item-2" class="control-button">•</a>
                <a href="#item-3" class="control-button">•</a>
            </div>
        </div>

0

I’ve had this problem, on the pc the image is normal, when placing on the site it rotates. To solve this, I did the following:

  1. Open the image in an image editor and place it, if it is "turned", in the right position.

  2. Save the image, but don’t overwrite it, save it under another name. Try putting it back into your html.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.