你如何呈现你的网站内容可以和内容本身一样重要。您显示的图像需要符合网站的图形设计，并且每个图像都需要符合预定义的大小。虽然在处理您自己的图像时，这可能很简单，物联网城市，但在显示用户上传的图像时，这项任务可能更具挑战性。你的用户可以上传不同分辨率和大小的图片。这意味着您需要动态调整图像，以适应图形设计定义的可用空间。但是，对于上载的图像的纵横比不同于保留的显示区域，简单的缩放调整将导致图像上方和下方或左侧和右侧的额外空间。它还可能影响页面上其他元素的间距。为了确保最终得到的图像大小适合填充所有可用空间，通常还需要为图像添加填充，可以使用CSS或操作原始图像。简单的图像填充现在的问题是，如何将额外的填充添加到图像中，以使最终结果适合并看起来专业？我们可以简单地决定，添加到所有图像的额外填充需要符合特定的颜色，例如：白色。您可以使用CSS来实现这个目的，但是Cloudinary使这个过程更容易实现。Cloudinary为图像和媒体管理的所有元素提供了一个全面的端到端解决方案，使web和应用程序开发人员能够将全部精力集中在自己的网站或应用程序的主要用途上。要使用Cloudinary添加特定颜色的填充，可以使用padding裁剪模式之一，并将background参数设置为所需的颜色。例如，用白色填充瓶子图像，使其在300像素的高度和宽度范围内，以及黑色边框：urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w_300，h_300，c逯u pad，b_白色/bo_2px_实心逯黑色/瓶子.jpgRuby：复制到剪贴板cl\U图像标记（"瓶子.jpg"，：转换=>[{：width=>300，：height=>300，：background=>"white"，：crop=>"pad"}，{:border=>"2px_实心_黑色"}])PHP:复制到剪贴板cl\U图像标记（"瓶子.jpg，数组（"transformation"=>数组(数组（"width"=>300，"height"=>300，"background"=>"white"，"crop"=>"pad"），数组（"border"=>"2px"实心"黑色"）)))Python:复制到剪贴板云图像（"瓶子.jpg"）。图像（转换=[{'width'：300，'height'：300，'background'："white"，'crop'："pad"}，{'border'："2px_实心_黑色"}])节点.js：复制到剪贴板cloudinary.image("瓶子.jpg"，{转换：[{宽：300，高：300，背景："白"，裁剪："垫"}，{边框："2px_实心_黑色"}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.width（300）.height（300）.background（"white"）.crop（"pad"）.chain（）.border（"2px\u solid\u black"））.imageTag（"瓶子.jpg");JS:复制到剪贴板cloudinary.imageTag('瓶子.jpg'，{转换：[{宽：300，高：300，背景："白"，裁剪："垫"}，{边框："2px_实心_黑色"}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image("瓶子.jpg"，{转换：[{宽：300，高：300，背景："白"，裁剪："垫"}，{边框："2px_实心_黑色"}]})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.Width（300）.Height（300）.Background（"white"）.Crop（"pad"）.Chain（）.Border（"2px\u solid\u black"））.BuildImageTag（"瓶子.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.width（300）.height（300）.background（"white"）.crop（"pad"）.chain（）.border（"2px\u solid\u black"）。生成（"瓶子.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setWidth（300）.setHeight（300）.setBackground（"白色"）.setCrop（"pad"）.chain（）.setBorder（"2px_solid_black"）。生成（"瓶子.jpg")!，cloudinary:云数据库）网络研讨会自动颜色填充为所有填充设置一个统一的颜色对于某些图像可能是一个很好的解决方案，但是如果您可以根据图像中边框像素的颜色自动设置填充颜色呢？添加的任何填充都将具有扩展图像画布的效果，并使其看起来好像填充区域实际上是图像本身的一部分。你猜怎么着？Cloudinary也使这一点变得简单。在"后台自动"参数设置为"自动"。例如，这是与上面相同的瓶子图像，但现在使用了自动颜色填充：urlrubyphpythonnode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w_300，h逯300，c逯u pad，b逯auto/bo_2px_实心逯黑色/瓶子.jpgRuby：复制到剪贴板cl\U图像标记（"瓶子.jpg"，物联网概念股，：转换=>[{背景=>"背景=>"宽度=>"300"，{:border=>"2px_实心_黑色"}])PHP:复制到剪贴板cl\U图像标记（"瓶子.jpg，数组（"transformation"=>数组(数组（"width"=>300，"height"=>300，"background"=>"auto"，"crop"=>"pad"），数组（"border"=>"2px"实心"黑色"）)))Python:复制到剪贴板云图像（"瓶子.jpg"）。图像（转换=[{'width'：300，'height'：300，'background'："auto"，'crop'："pad"}，{'border'："2px_实心_黑色"}])节点.js：复制到剪贴板cloudinary.image("瓶子.jpg"，{转换：[{宽度：300，高度：300，背景："auto"，裁剪："pad"}，{边框："2px_实心_黑色"}]})Java:复制到剪贴板cloudinary.url（）.转换（新转换（）.width（300）.height（300）.background（"auto"）.crop（"pad"）.chain（）.border（"2px\u solid\u black"））.imageTag（"瓶子.jpg");JS:复制到剪贴板cloudinary.imageTag('瓶子.jpg'，{转换：[{宽度：300，高度：300，背景："auto"，联网，裁剪："pad"}，{边框："2px_实心_黑色"}]}).toHtml（）；jQuery:复制到剪贴板$.cloudinary.image("瓶子.jpg"，{转换：[{宽度：300，高度：300，大数据信息，背景："auto"，裁剪："pad"}，{边框："2px_实心_黑色"}]})反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（新转换（）.Width（300）.Height（300）.Background（"auto"）.Crop（"pad"）.Chain（）.Border（"2px\u solid\u black"））.BuildImageTag（"瓶子.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.width（300）.height（300）.background（"auto"）.crop（"pad"）.chain（）.border（"2px\u solid\u black"）。生成（"瓶子.jpg");iOS:复制到剪贴板图像视图.cldSetImage(cloudinary.createUrl（）.setTransformation（CLDTransformation（）.setWidth（300）.setHeight（300）.setBackground（"auto"）.setCrop（"pad"）.chain（）.setBorder（"2px_solid_black"）。生成（"瓶子.jpg")!，cloudinary:云数据库）下面是另一个示例，它突出显示了在左侧图像中使用黑色填充值与在右侧图像中使用自动颜色填充之间的区别：URLRubyPHPPythonNode.jsJavaJSjQueryReactVue.jsAngular.netandroidiosalll公司：复制到clipboardhttps://res.cloudinary.com/demo/image/upload/w_300，h峎300，c峎pad，b峎auto/白色_毛衣.jpgRuby：复制到剪贴板cl\u image_tag（"白色_毛衣.jpg"，：width=>300，：height=>300，：background=>"auto"，：crop=>"pad"）PHP:复制到剪贴板cl\u image_tag（"白色_毛衣.jpg"，数组（"width"=>300，"height"=>300，大数据app，"background"=>"auto"，"crop"=>"pad"））Python:复制到剪贴板CloudinaryImage（"白色_毛衣.jpg"）.image（宽度=300，高度=300，背景="自动"，裁剪="填充"）节点.js：复制到剪贴板cloudinary.image（"白色_毛衣.jpg"，{宽度：300，高度：300，背景："自动"，裁剪："pad"}）Java:复制到剪贴板cloudinary.url（）.transformation（new transformation（）.width（300）.height（300）.background（"auto"）.crop（"pad"））.imageTag（"白色_毛衣.jpg");JS:复制到剪贴板cloudinary.imageTag（白色_毛衣.jpg{300'"自动裁剪"，宽度".html"；jQuery:复制到剪贴板$.cloudinary.image（"白色_毛衣.jpg"，{宽度：300，高度：300，背景："自动"，裁剪："pad"}）反应：复制到剪贴板Vue.js版：复制到剪贴板角度：复制到剪贴板.Net:复制到剪贴板cloudinary.Api.UrlImgUp.Transform（new Transformation（）.Width（300）.Height（300）.Background（"auto"）.Crop（"pad"））.BuildImageTag（"白色_毛衣.jpg")Android:复制到剪贴板媒体管理器.get（）.url（）.transformation（新转换（）.width（300）。height（300）.background（"au