将图像调整为精确大小,保留宽高比,并填充 php 中的任何空间

发布于 2024-09-08 17:32:56 字数 197 浏览 3 评论 0原文

嘿,

假设我想将图像转换为精确尺寸,例如:400x300。诀窍是,如果图像由于其纵横比而无法容纳 400x300,则将其放置在带有黑色边框的位置。

900x1200 的图像将被转换为 225x300 以保留其纵横比,然后在左右添加黑色边框以使其变为 400x300。

原始照片:

hy,

Let's say I want to convert an image to an exact size, eg: 400x300. The trick is, if the image, due to its aspect ratio, does not fit in 400x300, then place it in there with black borders.

A 900x1200 image would be converted down to 225x300 to retain its aspect ratio, and then given black borders left and right to make it 400x300.

original photo:

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(19

狼亦尘 2024-09-15 17:32:56
千笙结 2024-09-15 17:32:56

|||

|||

囍孤女 2024-09-15 17:32:56

|||

|||

雪化雨蝶 2024-09-15 17:32:56

|||

调整大小后,我想要看起来像这样:

_______________________
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|+++++++||||||||++++++|
|+++++++||||||||++++++|
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|_____________________|

“++++++++”我想要某种颜色,而“|||||||”是图像,在中间!

不幸的是我还没有任何代码!

我想要这样的东西:
http://phpthumb.sourceforge.net/demo/demo/ phpThumb.demo.demo.php#x22
谢谢

|||

after resize i want to look something like this:

_______________________
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|+++++++||||||||++++++|
|+++++++||||||||++++++|
|+++++++++++++++++++++|
|+++++++++++++++++++++|
|_____________________|

the: "+++++++" i want to be some color, and the "|||||||" are the image, in the middle!

unfortunately i don't have any code yet!

i want something like this:
http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x22
thanks

孤檠 2024-09-15 17:32:56

熟悉 gd 函数,它允许你可以操纵图像。

您需要使用 imagecreatefrom... 函数之一读取图像。然后,您需要使用 imagecreatetruecolor< 创建第二个图像/code>,您可以填充您选择的颜色。然后使用 imagecopyresampled< 将原始图像复制到新图像中/a>,它允许您在此过程中调整其大小。您需要事先通过一些简单的数学计算新的大小,其功能类似于 getimagesize 可以帮助您。

或者,使用 ImageMagick 类,它是 gd 您可能会或可能不会发现更容易合作。

祝你好运! :)

Get familiar with the gd functions, which allow you to manipulate images.

You'll need to read in your image using one of the imagecreatefrom... functions. Then you'll need to create a second image using, for example, imagecreatetruecolor, which you fill with your color of choice. Then you copy the original image into the new image using imagecopyresampled, which allows you to resize it in the process. You'll need to calculate the new size with some simple math beforehand, which functions like getimagesize can help you with.

Alternatively, play around with the ImageMagick class, which is an alternative to gd you may or may not find easier to work with.

Best of luck! :)

谜兔 2024-09-15 17:32:56

创建一个样式为黑色背景的 div,大小为 400x300。然后在该 div 内显示调整大小的图像。您甚至可以在显示 div 之前进行检查,以确保图像不是所需的外观。

像这样的:

<? 
$height-ratio = $height / 300;
$width-ratio = $width / 400;

if ($height-ratio == $width-ratio) {
 $ratio = $height-ratio;
} elseif ($height-ratio > $width-ratio) {
 $ratio = $height-ratio;
 echo "<div class='blackbox'>";
} else {
 $ratio = $width-ratio;
 echo "<div class='blackbox'>";
}

$newHeight = $height / $ratio;
$newWidth = $width / $ratio;
echo "<img src='".$imgSrc."' height='".$newHeight."' width='".$newWidth."' />";

if ($height-ratio != $width-ratio)
 echo "</div>";
?>

支持CSS:

.blackbox { 
 text-align: center;
 background-color: black;
 height: 300px;
 width: 400px;
}

Create a div styled to have a black background, and sized at 400x300. Then show your resized image inside that div. You can even include a check to make sure that the image is not the desired aspect before showing the div.

Something like this:

<? 
$height-ratio = $height / 300;
$width-ratio = $width / 400;

if ($height-ratio == $width-ratio) {
 $ratio = $height-ratio;
} elseif ($height-ratio > $width-ratio) {
 $ratio = $height-ratio;
 echo "<div class='blackbox'>";
} else {
 $ratio = $width-ratio;
 echo "<div class='blackbox'>";
}

$newHeight = $height / $ratio;
$newWidth = $width / $ratio;
echo "<img src='".$imgSrc."' height='".$newHeight."' width='".$newWidth."' />";

if ($height-ratio != $width-ratio)
 echo "</div>";
?>

With supporting css of:

.blackbox { 
 text-align: center;
 background-color: black;
 height: 300px;
 width: 400px;
}
多情出卖 2024-09-15 17:32:56

我非常喜欢提前编辑图片并将其调整为我想要的尺寸,而不是在渲染时设置宽度和高度。性能更好,您不必担心不同的浏览器可能会以不同的方式处理它。

因此,如果您没有图像编辑程序,请使用 Paint.net。免费且运行良好。

I'm a big fan of editing and resizing the pictures in advance to be the size I want rather than setting the width and height when it is rendered. The performance is better and you don't have to worry about how different browsers might handle it differently.

So if you don’t have an image editing program get Paint.net. Free and works well.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文