javascript - HTML根据图像大小调整图像大小

Question

我在做一个网上商城页面的时候遇到了这个问题。

大多数上传到我的数据库的照片都有不同的尺寸，我不得不调整它们的尺寸。但是当我这样做时，当我将所有图片的高度设置为相同时，一些图片的分辨率变得非常糟糕。

我想添加类似 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>

Answer 1

I want to add something looks like this, I guess:

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

你猜对了。 您只需要找到检测和更改图像大小的函数即可。

在哪里可以找到这些函数

首先查看PHP官方手册中的函数引用。

然后你会发现一个关于图像处理的专门部分:

Image Processing and Generation

事实证明，有几个库提供了所需的功能。 例如，如果您使用 GD，它会提供 getimagesize 和 imagescale。 Gmagick 和 ImageMagick 功能相似，只是名称不同。