基本上,我想上传图像(已排序)并将其按比例缩小到某些限制,例如最大宽度和高度,但要保持原始图像的纵横比。
我没有在服务器上安装Imagick-否则这很容易。
一如既往地提供任何帮助。谢谢。
编辑:我不需要整个代码或任何东西,只是朝着正确的方向推进将是很棒的。
我为完成的另一个项目编写了这样的代码。我已在下面复制了它,可能需要修补一下!(它确实需要GD库)
这些是它需要的参数:
$image_name - Name of the image which is uploaded
$new_width - Width of the resized photo (maximum)
$new_height - Height of the resized photo (maximum)
$uploadDir - Directory of the original image
$moveToDir - Directory to save the resized image
它将按比例缩小或放大图像到最大宽度或高度
function createThumbnail($image_name,$new_width,$new_height,$uploadDir,$moveToDir)
{
$path = $uploadDir . '/' . $image_name;
$mime = getimagesize($path);
if($mime['mime']=='image/png') {
$src_img = imagecreatefrompng($path);
}
if($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$src_img = imagecreatefromjpeg($path);
}
$old_x = imageSX($src_img);
$old_y = imageSY($src_img);
if($old_x > $old_y)
{
$thumb_w = $new_width;
$thumb_h = $old_y*($new_height/$old_x);
}
if($old_x < $old_y)
{
$thumb_w = $old_x*($new_width/$old_y);
$thumb_h = $new_height;
}
if($old_x == $old_y)
{
$thumb_w = $new_width;
$thumb_h = $new_height;
}
$dst_img = ImageCreateTrueColor($thumb_w,$thumb_h);
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y);
// New save location
$new_thumb_loc = $moveToDir . $image_name;
if($mime['mime']=='image/png') {
$result = imagepng($dst_img,$new_thumb_loc,8);
}
if($mime['mime']=='image/jpg' || $mime['mime']=='image/jpeg' || $mime['mime']=='image/pjpeg') {
$result = imagejpeg($dst_img,$new_thumb_loc,80);
}
imagedestroy($dst_img);
imagedestroy($src_img);
return $result;
}
我有一个使用CSS flexbox缩放到可用高度的DIV。在这个DIV中,我想在两个维度上与DIV一起缩放图像。这意味着它应该被缩放以保持其长宽比,并且小于相应DIV维度的维度应该居中。 我可以使图像跟随DIV的宽度,但不能跟随高度。因此,肖像图像脱离DIV界限。 这里有一个jsFiddle来演示这个问题。
我有一个。的数据是从服务器请求的。 以下是中的项布局: 我从服务器请求数据,获取图像url并将图像加载到 适配器中有方法的代码 图像大小为。我在我的Nexus4上运行我的应用程序。图像填充宽度,但高度不缩放。不显示整个图像。 我如何解决这个问题?
问题内容: 我希望图像填充其容器宽度的100%,并希望为其设置max-heigth属性,所有这些都保持长宽比,但允许丢失图像的任何部分。 我知道属性可以完成类似的操作,但是我想将其设置为内联标签。 关于如何使用CSS实现此目标的任何想法?或JavaScript? 问题答案: 您可以尝试CSS3 ,并查看浏览器支持 表 。 CSS3 / 指定对象(图像或视频)在其框内的放置方式的方法。对象适合选项包
问题内容: 使用CSS flex box模型,如何强制图像保持其纵横比? JS小提琴:http://jsfiddle.net/xLc2Le0k/2/ 请注意,图像会拉伸或收缩以填充容器的宽度。很好,但是我们也可以拉伸或缩小 高度 以保持图像比例吗? 的HTML 的CSS 问题答案: 对于img标签,如果您定义一侧,那么将调整另一侧的大小以保持纵横比,并且默认情况下,图像会扩展到其原始大小。 使用此
问题内容: 我正在使用Bootstrap创建轮播,我的图像很大,因此当屏幕小于图像时,不会保持该比例。 我该如何改变? 这是我的代码: 我需要图片适合100%的宽度,但要保持其500px的高度(我认为是500px),这意味着在较小的屏幕上我们看不到图片的最左侧和最右侧。 我尝试将图像包含在div中并添加 但这不起作用 谢谢! 问题答案: 问题在于引导CSS: 设置图像不会超过视口。您需要在CSS上
问题内容: 我正在处理图像,但遇到宽高比问题。 如您所见,并且已经指定。我为图像添加了CSS规则: 但是,我收到和。如何设置图像以调整尺寸,同时保持其纵横比。 img { 如果对于指定区域太大,则会缩小图像(不利的一面是,不会放大图像)。