当图像太小时，如何在图像上添加空白区域以适合给定大小 - How to add blank space on an image to fit a given size when image is too small

How to add blank space on an image to fit a given size when image is too small

我有不同大小(低于 200x200 像素(的图像，我希望通过添加具有给定颜色(例如白色(的空白区域来使它们成为 200x200 像素。我尝试使用裁剪库裁剪它们：http://codeigniter.com/user_guide/libraries/image_lib.html我不工作。这是我使用的一些代码，但没有成功：

$config = Array(
 'image_library' => 'gd2',
 'source_image' => '/path/to/my/image.jpg',
 'new_image' => '/path/to/my/small/image.jpg',
 'thumb_marker' => '',
 'create_thumb' => TRUE,
 'maintain_ratio' => TRUE,
 'width' => '200',
 'height' => '200'
);
$this->load->library('image_lib', $config);
if (!$this->image_lib->resize())
{
 $this->session->set_flashdata('message_error',  $this->image_lib->display_errors());
 redirect('/mon_controller', 'location');
}
$config['source_image'] = '/path/to/my/small/image.jpg';
$config['x_axis'] = '200';
$config['y_axis'] = '200';
$this->image_lib->initialize($config);
if ( ! $this->image_lib->crop())
{
 $this->session->set_flashdata('message_error',  $this->image_lib->display_errors());
 redirect('/my_controller', 'location');
}

编辑：我认为lib符合我的需求：http://www.matmoo.com/digital-dribble/codeigniter/image_moo/

我认为你需要这个.

http://www.matmoo.com/digital-dribble/codeigniter/image_moo/

很抱歉没有回答你的问题，但我建议用CSS来做，这样你就可以保留原始图像，以后可以在任何地方使用它们(如果你的设计明天改变怎么办？或者想在另一个不需要相同图像大小要求的页面中使用它们？(。

只需将图像放入div中，然后用margin: auto;(或text-align: center，现在不能说(将其设置样式以使其水平居中。
要垂直居中，您可以使用以下 jQuery 函数：

(function ($) {
$.fn.vAlign = function(){
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah) / 2);
    $(this).css('margin-top', mh);
    });
};

然后：$('#image').vAlign().