2015-01-11 13 views
0

其實我使用一個簡單的PHP代碼片段來遍歷一個目錄來抓取圖像並將它們插入到html標記中。從目錄加載後的PHP - 錯誤的方向

現在即時通訊面臨的問題是所有的圖像都是以橫向爲導向。所以肖像圖像也被定位爲風景圖像。

這裏是我的片斷:

<?php 
    $projectpath = 'Projects'; 
    $projects = glob($projectpath . '/*' , GLOB_ONLYDIR); 
    foreach($projects as $key=>$value): ?> 
     <section class="project"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-xs-12"> 
         <div class="project-images"> 
          <?php 
           $handle = opendir(dirname(realpath(__FILE__)).'/'.$value); 
           while($file = readdir($handle)){           
            if($file !== '.' && $file !== '..'){ 
             echo '<img class="img-responsive" alt="'. $file .'" src="'. $value .'/'. $file .'"/>'; 
            } 
           }                  
          ?> 
         </div> 
        </div> 
       </div> 
      </div> 
     </section> 
    <?php endforeach; ?> 

那麼什麼我錯過這裏?有什麼建議麼?

+0

你可以創建一些CSS旋轉照片90度 – Neat

+0

嗯,如何才能css驗證方向? –

+0

嗯,我認爲你的風景圖像的寬度值大於它們的高度值,而對於肖像圖像則是相反的方向,因此檢查哪一個較大並且如果它必須轉動或不轉動則決定。 – Neat

回答

1

我懷疑這些圖像真的有不同的方向。更有可能全部圖像處於橫向佈局(寬度大於高度),因此從技術角度來看可視化是正確的。

我想你通常會用PC上的一些查看器來查看圖像,該查看器會根據存儲在圖像元數據中的一些方向標誌自動旋轉圖像。但是這樣的標誌不是改變了真實,技術取向(或更好的分辨率)。相反,這種標誌只是圖像可視化的暗示。您的項目不會諮詢該標誌,這就是爲什麼您的圖片出現需要旋轉,而實際上它們不是。

因此,解決辦法是兩個選項之一:

  1. 之前,利用他們你的項目裏面,讓他們真正的技術方向是正確的旋轉圖像和圖像只有沒有任何要顯示額外的旋轉。

  2. 使用js或php或其他來檢測定位標誌並對其進行評估。根據結果​​,您可以設置一些CSS類,這會導致需要旋轉以進行可視化的那些圖像的基於CSS的旋轉。

+0

方向不同...檢查元信息。這是我的第一個方法。 –

+0

對不起,但在Web應用程序中沒有自動/自動旋轉圖像的實例。如果這些圖像具有不同的方向,它們將以不同的方向顯示。你在這裏失蹤了。你是如何檢查方向的?你使用了什麼工具? – arkascha

+0

其實上面的評論只有在你沒有(意外)通過一些css規則或類似的東西來自己旋轉圖片時纔有效。在瀏覽器中檢查所有這些css類及其效果。 :-) – arkascha

1

下面是簡單的PHP例子來檢查,如果圖像是縱向還是橫向:記住

<?php 

$imagePath = 'images/imagename.png'; 
$imageSize = getimagesize($imagePath); //returns an array 
$imageWidth = $imageSize[0]; // array key 0 is width 
$imageHeight = $imageSize[1]; // array key 1 is height 

if($imageWidth < $imageHeight){ 
    echo '<img class="ROTATE">'//add the rotate class 
} elseif($imageWidth > $imageHeight){ 
    echo '<img>'//do not add the rotate class 
} else { 
    echo '<img>'//do not add the rotate class 
?> 

走,這僅僅是一個例子,那你就必須調整腳本工作適合你。

+0

如果圖像有一個方形的大小? :-) _總是提供默認/其他情況! – arkascha

+0

感謝您添加'else'的情況。但實際上,您可以簡單地刪除'elseif'的情況... :-) – arkascha

+0

確實如此,但您可以選擇在將來擴展您的應用程序。 – Neat