Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] ułożenie img
Forum PHP.pl > Forum > Przedszkole
kamilo818
Witam,
mam pewien problem. Mianowicie mam div'y o rozmiarze 320/180 a w nich zdjęcia. Problem jest taki że wszystkie zdjęcia (chodzi tu o zdjecia w orientacji pionowej height > width) przekręcają się do orintacji poziomej o 90 stopni. Używam swipebox'a do wyświetalania zdjęć i tu też wszystki zdjęcia w orintajcji poziomej są wyświetane. Jak wejdę w zródło izdjecia to wyświetal sie prawidłowo - pionowo.

Taki mam kod:
  1. <a href="kategorie/mod/<?php echo $el['hash'];?>">
  2. <div class="category_box">
  3. <span id="title">
  4. <?php echo '#'.$el['hash'];?>
  5. </span>
  6. <div id="header_img">
  7. <img src="../<?php echo $el['image'];?>" alt=""/>
  8. </div>
  9. </div>
  10. </a>


  1.  
  2. div.category_box{
  3. vertical-align: top;
  4. display: inline-block;
  5. margin: 30px 1%;
  6. border: 1px solid #cccccc;
  7. width: 320px;
  8. height:auto;
  9. max-width: 97%;
  10. position: relative;
  11. cursor: pointer;
  12.  
  13.  
  14. }
  15.  
  16. div.category_box span#title{
  17. position: absolute;
  18. top:-24px;
  19. left:0;
  20. right: 0;
  21. height:20px;
  22. text-align: left;
  23. font-family: FlexoDemi, sans-serif;
  24. font-size: 14px;
  25. color: #555555;
  26.  
  27. }
  28.  
  29. div.category_box #header_img{
  30. width: 320px;
  31. height: 180px;
  32. max-width: 100%;
  33. overflow: hidden;
  34. }
  35.  
  36. div.category_box #header_img img{
  37. min-width: 100%;
  38. min-height: 100%;
  39. max-width: 100%;
  40. max-height: 100%;
  41. }


Problem jej w moim kodzie? Czy o coś innego chodzi?
kapslokk
W tym kodzie nie widzę nic co może powodować ten problem. Pokaż JavaScript z wywołaniem Swipeboxa
kamilo818
Chyba swipe box nie ma nic z tym wspólnego bo zanim go odpale to miniaturki są tak samo poprzekręcane.

Teraz coś nowego.
Te 2 zdjecia, oba pionowe.
1. wyświetla się przekręcone a 2. normalnie w pionie.
Czy to chodzi o zdjęcie w takim razie?

o nawet po wklejeniu tutaj przekręca się do poziomu.
1.
2.
Pyton_000
Tutaj to jest zapewne sprawka skryptu robiącego miniaturki.
kapslokk
Znalazłem coś takiego:
http://stackoverflow.com/questions/2707088...styled-img-tags
kamilo818
w manualu jest coś takiego
  1. $image = imagecreatefromstring(file_get_contents($_FILES['image_upload']['tmp_name']));
  2. $exif = exif_read_data($_FILES['image_upload']['tmp_name']);
  3. if(!empty($exif['Orientation'])) {
  4. switch($exif['Orientation']) {
  5. case 8:
  6. $image = imagerotate($image,90,0);
  7. break;
  8. case 3:
  9. $image = imagerotate($image,180,0);
  10. break;
  11. case 6:
  12. $image = imagerotate($image,-90,0);
  13. break;
  14. }
  15. }
  16. // $image now contains a resource with the image oriented correctly


tylko teraz nie wiem jak użyć tej zmiennej $image.

var_dump zwraca:
  1. resource(13) of type (gd)


Domyślam się że powinienm coś przy uploadzie zmienić tutaj:
  1. move_uploaded_file($file['tmp_name'], $UploadDirectory . $NewFileName)




-----------------------------
Rozwiązanie
-----------------------------

  1. function image_fix_orientation($filename) {
  2. $exif = exif_read_data($filename);
  3. if (!empty($exif['Orientation'])) {
  4. $image = imagecreatefromjpeg($filename);
  5. switch ($exif['Orientation']) {
  6. case 3:
  7. $image = imagerotate($image, 180, 0);
  8. break;
  9.  
  10. case 6:
  11. $image = imagerotate($image, -90, 0);
  12. break;
  13.  
  14. case 8:
  15. $image = imagerotate($image, 90, 0);
  16. break;
  17. }
  18.  
  19. imagejpeg($image, $filename, 90);
  20. }
  21. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.