首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

PHP裁剪图像以固定宽度和高度而不会丢失尺寸比率

在这个问答内容中,我们要求裁剪图像以固定宽度和高度,同时保持尺寸比率。这可以通过使用PHP的GD库或ImageMagick库来实现。以下是一个使用GD库的示例代码:

代码语言:php
复制
function cropImage($source, $destination, $width, $height) {
    // 获取原始图像的尺寸
    list($sourceWidth, $sourceHeight, $sourceType) = getimagesize($source);

    // 计算新的尺寸
    $ratio = min($width / $sourceWidth, $height / $sourceHeight);
    $newWidth = $sourceWidth * $ratio;
    $newHeight = $sourceHeight * $ratio;

    // 创建新的图像资源
    $newImage = imagecreatetruecolor($width, $height);
    $sourceImage = imagecreatefromstring(file_get_contents($source));

    // 保持PNG和GIF透明度
    imagealphablending($newImage, false);
    imagesavealpha($newImage, true);
    $transparent = imagecolorallocatealpha($newImage, 255, 255, 255, 127);
    imagefilledrectangle($newImage, 0, 0, $width, $height, $transparent);

    // 将原始图像缩放并裁剪
    imagecopyresampled($newImage, $sourceImage, ($width - $newWidth) / 2, ($height - $newHeight) / 2, 0, 0, $newWidth, $newHeight, $sourceWidth, $sourceHeight);

    // 保存新的图像
    switch ($sourceType) {
        case IMAGETYPE_GIF:
            imagegif($newImage, $destination);
            break;
        case IMAGETYPE_JPEG:
            imagejpeg($newImage, $destination);
            break;
        case IMAGETYPE_PNG:
            imagepng($newImage, $destination);
            break;
        default:
            return false;
    }

    // 销毁图像资源
    imagedestroy($newImage);
    imagedestroy($sourceImage);

    return true;
}

这个函数接受四个参数:源图像文件路径、目标图像文件路径、固定宽度和高度。它首先获取源图像的尺寸,然后计算新的尺寸,以保持尺寸比率。接下来,它创建一个新的图像资源,并将源图像缩放并裁剪到新的尺寸。最后,它将新的图像保存到目标文件路径。

这个函数可以处理JPEG、PNG和GIF格式的图像。如果需要处理其他格式的图像,可以使用ImageMagick库,它支持更多的图像格式。

使用这个函数,你可以轻松地裁剪图像以固定宽度和高度,同时保持尺寸比率。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

宝, 来学习一下CSS中的宽高比,让 h5 开发更想你的夜!

在网页设计中,高宽比的概念是用来描述图像宽度高度应按比例调整。 考虑下图 比率是4:3,这表明苹果葡萄的比例是4:3。 换句话说,我们可以为宽高比为4:3的最小框是4px * 3px框。...当此盒式高度按比例调整为其宽度时,我们将有一个致宽尺寸的框。 考虑下图。 盒子被按比例调整大小,其宽度高度之间的比例是一致的。...它有助于设计师创建一个图像大小的清晰指南,这样开发者就可以在开发过程中处理它们。 计算宽高比 为了测量宽高比,我们需要将宽度除以如下图所示的高度宽度高度之间的比例是1.33。...这个解决方案在多种视口尺寸下都不会好看。 注意到在中等尺寸下,固定高度的图片从左边右边被裁剪得太厉害,而在手机上,它们又太宽。所有这些都是由于使用了固定高度的原因。...,以便有一个最小的尺寸aspect-ratio会照顾到高度

1.4K30

CSS背景1-概述

1.5、background-size background-size 属性规定背景图像尺寸。 值 描述 length 设置背景图像高度宽度。第一个值设置宽度,第二个值设置高度。...percentage 父元素的百分比来设置背景图像宽度高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。...cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 contain 把图像图像扩展至最大尺寸,以使其宽度高度完全适应内容区域。...cover 图片宽度高度比例不变,填满盒子,超出部分会被裁剪。 contain 图片宽度高度比例不变,容器内至少有一张完整的图,容器留白区,铺不下的再裁掉。...1.7 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 值 描述 scroll 默认值。背景图像会随着页面其余部分的滚动移动。

57820

OpenCV 几何变换-图像缩放

图像的缩放主要用于改变图像的大小,缩放后图像图像宽度高度会发生变化。...第二个参数为输出图像 第三个参数为输出图像输入图像尺寸(包含长宽) 第四个参数为输出图像输入图像水平方向上的比例 第五个参数为输出图像输入图像垂直方向上的比例 第六个参数为插值方法:...需要注意的是: dsize是一个Size类型的数据,它包含图像的长宽,fxfy为double类型,值反应图像的长或宽的比例。...所以dsizefx,fy必须不能同时为零,也就是说要么dsize不为零fx与fy同时可以为0,要么dsize为0fx与fy不同时为0;resize函数的目标大小可以是任意的大小,可以不保持长宽比率...当然在Size里面也是可以直接输入数值的,这样的话可以做固定尺寸的操作,不发生裁剪

38930

php图像裁剪服务器搭建

流程大致是,首先我们传给服务器原图像裁剪尺寸,然后服务器进行裁剪,生成对应的裁剪图片,下次我们再访问相同图像相同的裁剪尺寸的时候,我们就不需要裁剪,直接进行图片的访问就行。...,会拉伸图片 function imagecropper2($source_path, $width, $height, $save_image) { //获取原图像$filename的宽度$width_orig...高度$height_orig $info = getimagesize($source_path); $width_orig = $info[0]; $height_orig = $info[1];...$mime = $info['mime']; //根据参数$width$height值,换算出等比例缩放的高度宽度 if ($width && ($width_orig<$height_orig)...,会丢失图像部分像素 function imagecropper($source_path, $target_width, $target_height, $save_image) { $source_info

1.5K20

CSS中的background属性与marginpadding内外边距的关系总结

/ 单值语法 / background-repeat: repeat; 默认,背景图像在垂直水平方向重复。如果大小不合适,最后一个图像会被裁剪。...background-repeat: space; 【当前没有广泛支持】图像会尽可能的重复, 但是不会裁剪....第一个最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间,background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示,只在一种情况下裁剪会发生...background-size: initial; 背景图的原始尺寸 background-size: cover; 缩放背景图片完全覆盖背景区,超出部分裁剪 background-size: contain...; 缩放背景图片完全装入背景区,不够的地方空白显示 / 一个值: 这个值指定图片的宽度,图片的高度默认为auto / background-size: 50%; 相对背景区【由 background-origin

6.4K00

Nginx网络压缩 CSS压缩 图片压缩 JSON压缩

图片压缩分为两类:一是等比压缩;二是固定宽高压缩。根据应用场景的不同也分为两类:一是固定参数;二是动态参数。 此部分图片压缩后到达浏览器不会被还原。...(一)等比压缩 使用关键词resize实现等比压缩,指定宽度或者高度即可在原尺寸图片的基础上等比率压缩图片。如果同时指定宽度高度,只有一个参数生效。...1、静态参数 固定宽度高度自适应 location / {   image_filter resize 320 -; } 固定高度宽度自适应 location / {   image_filter...动态指定宽度高度自适应 location ~* /(.+)\.(jpg|jpeg|gif|png)!....$2 /default.png;   root   html; } (二)固定宽高压缩 使用关键词crop实现等宽等高裁剪

5.2K41

OpenGL坐标系及坐标转换

这个坐标系的长度单位坐标轴的方向要适合对被显示物体的描述,这个坐标系称为世界坐标系。世界坐标系是始终固定不变的。 世界坐标系屏幕中心为原点(0, 0, 0),在OpenGL中用来描述场景的坐标。...参数fovy定义视野在X-Z平面的角度,范围是[0.0,180.0];参数aspect是投影平面宽度高度比率;参数zNearFar分别是远近裁剪面沿Z负轴到视点的距离,它们总为正值。 ?...函数参数(x, y)是视口在屏幕窗口坐标系中的左下角点坐标,参数widthheight分别是视口的宽度高度。...注意,在实际应用中,视口的长宽比率总是等于视景体裁剪面的长宽比率。如果两个比率不相等,那么投影后的图像显示于视口内时会发生变形,如下图所示。另外,屏幕窗口的改变一般不明显影响视口的大小。...因此,在调用这个函数时,最好实时检测窗口尺寸,及时修正视口的大小,保证视口内的图像能随窗口的变化变化,且不变形。 ?

4K70

Web 技术:CSS最小最大(宽度高度)知识点及优缺点

min-width padding 在内容较长的情况下,min-width可以扩展按钮的宽度水平方向上的padding应该被添加,实现一个合适的外观按钮。 ?...max-width的常见且简单的用例是将其与图像一起使用。 考虑以下示例: ? 图像比它的父元素大。通过使用max-width: 100%,图像宽度不会超过其父图像宽度。...如果图像比父图像小,则max-width: 100%不会图像产生实际影响,因为它比父图像小。 使用最小宽度最大宽度 ?...最大宽度/高度视口单位的流体比率 为了使比例容器能够根据视口大小进行响应缩放,引入了padding hack。 现在,我们可以通过组合CSS中的视口单位最大宽度/高度来模仿相同的行为。 ?...我们有一个尺寸为644 * 1000像素的图像

5.5K20

【CSS】背景样式:background

3 background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。 1 background-image 规定要使用的背景图像。...background-size 规定背景图像尺寸。...div{ background-size:80px 60px; } background-size 值 作用 length 设置背景图像高度宽度。 第一个值设置宽度,第二个值设置高度。...percentage 父元素的百分比来设置背景图像宽度高度。 第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。...cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 contain 把图像图像扩展至最大尺寸,以使其宽度高度完全适应内容区域。

1.6K30

wxss学习系列《三》背景(Background)与颜色(Color),边框(Border)

no-repeat:图像不平铺。 round:背景图像自动缩放直到适应且填充整个容器。 space:背景图像相同的间距平铺且填充满整个容器或者某个方向。 space: ? round: ?...4.background-attachment:指定对象的背景图像是随对象内容滚动还是固定的。 取值:fixed:固定位置。scroll:相对于元素固定,跟着元素。...6.background-size:指定对象的背景图像尺寸大小。 取值:auto:背景图的真实大小。 cover:等比例缩放到完全覆盖容器。有可能超出容器。...contain:将背景图等比例缩放到宽度或者高度与容器的宽度或者高度相等,始终都在容器内。 7.background-clip:指定对象的背景图像向外裁剪的区域。...3>border-image-width:设置边框背景的宽度。用于指定使用多厚的边框来承载呗裁剪后的图像

2.8K50

「Adobe国际认证」Adobe Photoshop,如何裁剪并拉直照片?

2.绘制新的裁剪区域,或拖动角边缘手柄,指定照片中的裁剪边界。 3.(可选)使用控制栏指定裁剪选项。 大小比例选择裁剪框的比例或大小。...如果您启用“自动调整不透明度”,那么当您编辑裁剪边界时会降低不透明度。 删除裁剪的像素禁用此选项应用非破坏性裁剪,并在裁剪边界外部保留像素。非破坏性裁剪不会移去任何像素。...您可以稍后单击图像查看当前裁剪边界之外的区域。 启用此选项删除裁剪区域外部的任何像素。这些像素将丢失,并且不可用于以后的调整。 注意:右键单击裁剪框,从上下文菜单中访问常用的裁剪选项。...1.选取“图像”>“画布大小”。 2.执行下列操作之一: 在“宽度高度”框中输入画布的尺寸。从“宽度高度”框旁边的弹出菜单中选择所需的测量单位。...选择“相对”,然后输入要从图像的当前画布大小添加或减去的数量。输入一个正数将为画布添加一部分,输入一个负数将从画布中减去一部分。 3.对于“定位”,单击某个方块指示现有图像在新画布上的位置。

2.8K10

全民K歌折叠屏适配探索

: 对于宽比高长的视频来说: 在首页(容器高宽固定)情况下,无论展开、折叠其宽度填满,高度居中自适应伸缩。...在详情页(容器宽度固定高度可变)情况下,折叠时:容器高度计算为最低高度,视频垂直居中显示;展开时:视频宽度填满、高度自适应伸缩、容器自动扩容。...对于宽比高短的视频来说: 在首页(容器高宽固定)情况下,展开时视频高度填满,宽度居中对齐;视频高度填满,宽度按比例溢出。...在详情页(容器宽度固定高度可变)情况下,折叠时:容器高宽与视频等比占满屏幕宽度高度自适应;展开时:视频尽可能放大,但满足高度在等比情况下不会溢出最大可视范围。...计算原则 我们可以根据前面提及的视频尺寸,容器的波动范围(容器高度不是固定,而是随视频可变,有范围);经过一个合理的运算,最终输出一个外部容器的尺寸,以及视频的展示尺寸。 ?

2.4K30

让图片完美适应:掌握 CSS 的object-fit与object-position

在过去,我们要么在图像编辑器中裁剪图像,要么通过设置宽度/或高度约束来调整图像大小(这不是一个完美的选择),或者执行某种复杂的裁剪,或者可能转而使用背景图像(如果图像不仅仅是为了装饰的话)。...这个指定的区域可能有固定宽度高度,或者可能是一个更具响应性的空间,如根据浏览器视口大小变化的网格区域。...默认情况下,图像的内容框与图像的自然尺寸相匹配。 当我们为图像应用不同的宽度/或高度时,我们实际上是在改变内容框的尺寸。如果内容框的尺寸发生变化,图像仍然会填充内容框。...与object-fit: cover不同,我们的图像不会被强制在至少一个轴上完全可见。原始图像宽度高度都大于内容框,所以它在两个方向上都溢出,如下图所示。...结果与图像设置为宽度高度为 100% 并包含在一个设置为 300px 乘300px 的 div 中的结果相同。

27810

CSS3背景

1、background-size 在 CSS3中,background-size 属性规定背景图像尺寸。这就允许我们在不同的环境中重复使用背景图片,像素或百分比规定尺寸。...如果百分比规定尺寸,那么尺寸相对于父元素的宽度高度。 length:设置背景图像高度宽度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。...percentage: 父元素的百分比来设置背景图像宽度高度,第一个值设置宽度,第二个值设置高度,如果只设置一个值,则第二个值会被设置为auto。...cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。 contain: 把图像图像扩展至最大尺寸,以使其宽度高度完全适应内容区域。...3、background-clip background-clip 属性规定背景的绘制区域 padding-box: 背景被裁剪到边框盒 border-box: 背景被裁剪到内边距框 content-box

98430

canvas 处理图像(上)

然而,不需要担心,因为剪掉的原因是画布小于所绘制的图像尺寸图像是以完整尺寸绘制的。 然而,无法看到另一半图像很让人失望,所以让我们看看如何使它适合画布的尺寸。 2....2.1 调整图像大小 实际上,调整图像大小与绘制完整尺寸图像一样简单,只需要传入希望绘制的图像宽度高度。...333像素的高度是按照原始图像的高宽比(高度宽度的比例)计算得来的。...裁剪是drawImage方法的最后一种用法,它总共有9个参数:源图像、源图像裁剪区原点坐标(x, y)、源图像裁剪宽度高度、在画布(目标)上绘制图像的原点坐标(x, y)及在画布上绘制图像宽度高度...像素的正方形,然后相同的宽度高度将它绘制到画布的左上角。

2K10

简单说 CSS中的 object-fit 与 object-position

https://blog.csdn.net/FE_dev/article/details/78249063 说明 问题: 一个div宽度固定高度固定,采用Flex布局,它里面有两个元素一个...contain 包含,保持原始的尺寸比例,保证替换元素完整显示,宽度高度至少有一个内容区域的宽度高度一致,部分内容会空白。 cover 覆盖,保持原始的尺寸比例,保证内容区域被填满。...比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度一个固有的比率。...比如一幅位图有固有用绝对单位指定的宽度高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。 CSS渲染模型不考虑替换元素内容的渲染。...的默认值是0% 0% 2、如果仅指定了一个值,其他值将是50% 总结 这两个属性,主要是解决在布局时遇到的 尺寸 宽高比问题,说简单点就是处理图片会变形的问题,object-position

89740

Material Design — 网格列表(Grid lists)

Grid lists由垂直水平布局排列的cell重复后组成。 Grid lists最适用于同质数据类型。 它们有助于提高用户对Grid lists所含内容的视觉理解。...一个明显的例外是水平滚动的单行图像grid list,例如图库,它与典型的阅读模式相符合。 切断grid lists初始滚动位置中的网格图块,传递出内容溢出的滚动方向。 ?...尺寸调整大小 调整grid list的大小会导致tiles在水平空间变为可用时重新排序。全屏的grid list会调整大小适应屏幕宽度。 水平空间收缩时,grid list不会转换为list。...响应式设计 全屏grid lists应该使用Ratio Keylines导出的具有最小最大宽度的流体图像比率。他们应该保留固定高度,marginspadding。...居中的grid lists具有最小宽度的fluid margins。它们保持固定图像宽度高度padding。 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。

3.5K120
领券