我正在创建一个“图像生成器”,用户可以上传图像并添加文字和/或绘制图像。输出的图像是固定尺寸(698×450)。
在客户端,当用户上传图像时,将其设置为背景大小为698×450的div的背景。这使得它很好地填满了地区。
最终组合的图像由PHP使用GD函数生成。我的问题是,如何在PHP中以与CSS相同的方式获得图像的扩展。我希望PHP脚本的结果看起来像在CSS中设置的图像一样,就像上面那样。
有人知道浏览器使用background-size:cover如何计算如何适当地缩放图像?我想把它翻译成PHP。
谢谢
解决方法
这是覆盖计算背后的逻辑。
您有四个基本值:
imgWidth // your original img width imgHeight containerWidth // your container width (here 698px) containerHeight
从这些值得出的两个比值:
imgRatio = (imgHeight / imgWidth) // original img ratio containerRatio = (containerHeight / containerWidth) // container ratio
您想要找到两个新值:
finalWidth // the scaled img width finalHeight
所以:
if (containerRatio > imgRatio) { finalHeight = containerHeight finalWidth = (containerHeight / imgRatio) } else { finalWidth = containerWidth finalHeight = (containerWidth / imgRatio) }
…你有相当于一个背景大小:封面。