Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

  • 0
leonardo23costa

Imagem rotacionando automaticamente

Pergunta

Galera, estou com um probleminha no meu HTML/CSS... Algumas imagens, geralmente de tamanho grande estão rotacionando sozinhas...

Segue em anexo uma imagem para vocês entenderem melhor.

 

Observem que as duas primeiras imagens estão na posição correta, porém a terceira e a quarta estão viradas... sendo que quando faço o upload elas estão na posição correta...

 

Segue meu fonte:

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

 

Fico no aguardo por favor, abs.

 

Sh3UL.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

6 respostas a esta questão

Recommended Posts

Leonardo 

 

Lá está o que eu te falei até porque se tu reparares a imagem que é mostrada na página web a sua orientação está óptima, se tua rodares ela vai ficar deitada e ai ficará boa certo ? porque ? porque foi tirada com o telemóvel deitado ....

 

Estás a perceber ? quando viras a camera do telemóvel a orientação da imagem é alterada, se tirares uma com o telemóvel na vertical e outra com ele na horizontal a orientação da foto muda completamente...

 

Porem tens uma forma de resolver o problema em php quando fazes o upload da foto..

 

Fazes o upload da foto para uma base de dados ? ou na base de dados so guardas o link ?

 

A solução em php é esta :

<?php
$image = imagecreatefromstring(file_get_contents($_FILES['image_upload']['tmp_name']));
$exif = exif_read_data($_FILES['image_upload']['tmp_name']);
if(!empty($exif['Orientation'])) {
    switch($exif['Orientation']) {
        case 8:
            $image = imagerotate($image,90,0);
            break;
        case 3:
            $image = imagerotate($image,180,0);
            break;
        case 6:
            $image = imagerotate($image,-90,0);
            break;
    }
}
// $image now contains a resource with the image oriented correctly
?>

Podes encontrar mais informações no site oficial ->http://php.net/manual/en/function.exif-read-data.php

 

Se for em javaScipt vais precisar de utilizar uma biblioteca, é mais fácil fazer em php ...

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Leonardo

 

Acredito que  que esteja a acontecer é que as imagens que estas a fazer upload não tenham a orientação EXIF definida, e dai o navegador interpretar isso e girar a imagem automaticamente Se essas fotografias foram tiradas com camara do telemovel é bastante provavelmente que seja este o teu problema... 

 

Podes verificar isso neste link abaixo 

http://exifdata.com/index.php

 

Podes utilizar este link para "reparares" a tua imagem ->

https://www.thexifer.net/

 

Ou então se não quiseres ter tanto trabalho podes forçar a orientação da imagem no css

<style> 
div {
    /* Vamos então rotacionar a div */
    -ms-transform: rotate(0deg); /* Para funcionar o IE9*/
    -webkit-transform: rotate(0deg); /* Para os restantes navegadores firefox, Chrome, Safari, Opera etc... */
    transform: rotate(0deg);
}
</style>

O que esse código faz é transformar todas as imagens que estão dentro de uma div deixando-as visíveis na página web com 0 graus de rotação ....

 

Espero que tenha ajudado 

 

 

Abraço

 

Vítor Mendes

 

 

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa Vitor, obrigado pelas dicas... então essas imagens foram tiradas do meu celular mesmo, inclusive notei que a altura delas são maiores que a largura. Tentei usar aquele css que você mandou mas não deu certo, as imagens continuam rotacionadas... precisava que meu app fizesse isso automático porque senão acho que vários usuários terão esse problema.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Humm esquisito isso!! 

 

Experimenta com outras imagens vai mesmo ao google imagens buscar imagens e mete só para tirar uma duvida com que estou ok ?

 

class="img-thumbnail img-responsive small-spacer"   -> foste tu que fizeste esta classe

O que está nessa classe? 

 

Eu acho que vais ter de fazer uma alteração ao teu código e passar a utilizar a tag img ...

 

 

 

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não então, esta classe é do meu template... tentei utilizar a tag img mas ocorre a mesma coisa. E são só as imagens que eu seleciono do celular que da problema... estava pensando aqui, será que na hora que estou fazendo o upload eu poderia configurar algo?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Por favor, me permita tirar uma dúvida com os amigos.

      Tenho um Formulário onde o Usuário digita todos os Dados necessários.

      Minha dúvida:
      --> como faço após o usuário digitar os dados e salvar, o Sistema chamar uma Modal ou mensagem perguntando se deseja imprimir agora ?

      Grato,
       
      Cesar
    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos, referente a PDV.
       
      Estou escrevendo um Sistema com Ponto de Vendas, a minha dúvida é o seguinte, referente ao procedimento mais correto.

      Conforme o caixa vai efetuando a venda, o Sistema de PDV já realiza:
      a baixa direto dos produtos no estoque
      ou
      somente após concretizar a venda o sistema baixa os produtos do estoque ?
       
      Grato,
       
      Cesar
       
    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.