首页
学习
活动
专区
工具
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.7K30

CSS背景1-概述

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

60120
  • OpenCV 几何变换-图像缩放

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

    43830

    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.3K41

    CSS中的background属性与margin和padding内外边距的关系总结

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

    7.4K00

    OpenGL坐标系及坐标转换

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

    4.2K71

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

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

    6.1K20

    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:设置边框背景的宽度。用于指定使用多厚的边框来承载呗裁剪后的图像。

    3K50

    【CSS】背景样式:background

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

    1.6K30

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

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

    2.9K10

    全民K歌折叠屏适配探索

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

    2.5K30

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

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

    96410

    CSS3背景

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

    99730

    canvas 处理图像(上)

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

    2.1K10

    begin主题使用说明(详解教程)

    依次顺序:特色图片→自定义栏目→自动获取文章第一张图片(可选择裁剪与否)→随机缩略图 1、特色图像,需到主题选项→基本设置中勾选“启用特色图像”,才能使用。...第7条:自动缩略图改为使用timthumb.php裁剪本地图片 建议大家使用特色图像或者自定义栏目,制作单独的缩略图,调用尺寸比较小的图片,尽量不要使用自动获取文章中大图片作为缩略图,会严重影响页面加载速度...首页幻灯 编辑准备显示在幻灯中的文章,在文章设置面板中“显示在首页幻灯中....”输入图片链接地址即可将该文章显示在首页幻灯中,图片尺寸:大于等于760px,高度任意,但图片尺寸必须相同。...为幻灯中的文章添加图片,编辑指定的文章,添加自定义栏目,名称:cat_img,值:图片地址,图片尺寸:宽度大于等于1080px,高度不限,但必须相同。...可按照“生活一网通 ”提供的方法按屏幕宽度判断显示广告的尺寸。

    4.8K40

    简单说 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

    93940

    全栈之前端 | 9.CSS3基础知识之图像元素样式学习

    object-fit 属性: 指定可替换元素(例如: 或 )的内容应该如何适应到其使用高度和宽度确定的框。...属性: 设置背景图像是固定还是滚动 background-blend-mode 属性: 设置背景图像与背景色如何混合 clip-path 属性 : 以裁剪方式截取元素和图像。...object-fit - 指定可替换元素的内容应该如何适应到其使用高度和宽度确定的框 描述: 你可以选择对容器内的图像作其他方式的处理。...space: 图像会尽可能得重复但是不会裁剪, 第一个和最后一个图像会被固定在元素 (element) 的相应的边上,同时空白会均匀地分布在图像之间。...(图像不会被压缩)*/ /* 一个值:这个值指定图片的宽度,图片的高度隐式的为 auto */ background-size: 50% background-size: 3em background-size

    25610

    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导出的具有最小和最大宽度的流体图像比率。他们应该保留固定的高度,margins和padding。...居中的grid lists具有最小宽度的fluid margins。它们保持固定的图像宽度,高度和padding。 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。

    3.5K120
    领券