基於它的大小的HTML調整大小圖像

上傳到我的數據庫的大部分照片都有不同的大小，我不得不調整它們的大小。但是當我這樣做的時候，當我將所有的高度設置爲相同時，一些圖片的分辨率變得非常糟糕。

我想添加一個像if子句的東西，它決定了圖像的大小，然後只調整大於給定大小的圖像的大小。

我想補充的東西看起來是這樣的，我想：

if (img height < 300px) { 
    img height = "100px"; 
} else { 
    img height = "400px"; 
}

這裏是我當前的代碼：

<ul class="prdList column4"> 
     <li class="item" id="anchorBoxId_{$product_no}"> 
      <div class="box"> 
       <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span> 
       <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_big}" id="{$image_medium_id}" alt="" class="thumb" /></a> 
       <div class="status"> 
        <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div> 
        <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div> 
       </div> 
       <p class="name"> 
        <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a> 
       </p> 
       <ul module="product_ListItem"> 
        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> 
        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> 
       </ul> 
      </div> 
     </li> 
     <li class="item" id="anchorBoxId_{$product_no}"> 
      <div class="box"> 
       <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span> 
       <a href="/product/detail.html{$param}" name="anchorBoxName_{$product_no}"><img src="{$image_big}" id="{$image_medium_id}" alt="" class="thumb" /></a> 
       <div class="status"> 
        <div class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons} {$benefit_icons}</div> 
        <div class="button"><div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}</div> 
       </div> 
       <p class="name"> 
        <a href="/product/detail.html{$param}" class="{$product_name_display|display}"><strong class="title {$product_name_title_display|display}">{$product_name_title} :</strong> {$product_name}</a> 
       </p> 
       <ul module="product_ListItem"> 
        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> 
        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li> 
       </ul> 
      </div> 
     </li> 
    </ul> 
</div>

來源

2017-08-17 Lee SinWoo

在上傳到您的數據庫之前，您最好使用簡單的圖片工具手動調整它們大小 – codemax

@codemax我想這是賣家上傳圖片。強制賣家上傳特定尺寸的圖片是一個簡單的解決方案，但不是用戶友好的。 – weakish

我正在調整現在上傳的所有新圖像，但我無法對之前發佈的圖像進行任何操作，因爲它們太多了，我無法手動修復所有這些圖像=（ –

我想補充的東西看起來是這樣的，我想：

if (img height < 300px) { 
    img height = "100px"; 
} else { 
    img height = "400px"; 
}

你猜對了。您只需找到檢測和更改圖像大小的功能即可。

在哪裏可以找到這些功能

首先檢查在官方PHP手冊中的函數引用。

這時你會發現在圖像處理的專用部分：

Image Processing and Generation

原來，幾個圖書館提供所需的功能。例如，如果您使用的是GD，則它提供getimagesize和imagescale。 Gmagick和ImageMagick具有類似的功能，只是名稱不同而已。

來源

2017-08-17 02:42:33 weakish

感謝您的回覆並更正了我的錯誤語法=）我會試着更多地研究你提供給我的那些引用來解決我的問題 –

基於它的大小的HTML調整大小圖像

回答

相關問題