2013-04-17 13 views
2

让我来举个例子来解释。一个计算图像大小的逻辑,保持父div的图像尺寸比例

Lets say I have an Image of size 

960px X 668px 

I have a div which holds this image. The div size is 
154px X 75px 

这个div可以有任何可变大小。

If we see that the aspect ratio of image and the aspect ratio of the div 
that holds image are different. 

所有我需要做的是调整大小和作物使用PHP图像以这样的方式,它需要原始尺寸的最大可能的高度和宽度,并且还保持其保持此图像的div纵横比。 我只需要一个逻辑来计算一个百分比,DIV的宽度和高度应该乘以多少,以便产生的尺寸更接近图像的大小,但不会超过图像的大小,纵横比也将是相同的DIV但不是图像。

感谢 Sharmila

+0

@MarcB,好了,链接,您建议如何调整图像大小,使其完全符合中占位符div没有被拉伸。我的问题是占位符的宽度和高度应该增加多少百分比,以使得到的尺寸不会超过原始图像尺寸并保持占位符宽度和高度的高宽比。 – Sharmila

+0

我无法理解,为什么要在相同纵横比的情况下乘以div尺寸。如果纵横比不同,那么图像的某些部分将被截断。 – Tarun

+0

@Tarun。 Acutally我生成一个PDF,最初图像的大小和裁剪,以匹配占位符div的确切大小。通过这种方式,效果不佳,所生成的PDF中的图像太模糊(因为图像被缩小并裁剪以匹配占位符的大小)。现在我想裁剪和调整与占位符相同的纵横比的图像,但这次的尺寸较大,这样生成的PDF将具有清晰的图像。我希望你明白我的意思 – Sharmila

回答

1

好吧,那么你需要检查,如果你使用的宽度比或高度比。

img.with/div.with = ratio_w 
img.height/div.height = ratio_h 

然后,较高的比例是您需要使用的比例,以确保您的图像适合div。

你的榜样,我们有

ratio_w = 960/154 = 6.2 
ratio_h = 668/75 = 8.9 

ratio_h越高,所以ratio_h是你比

然后,以满足您的DIV,这里是调整大小演算

960/8.9 = 108 
668/8.9 = 75 

逻辑与其他值相同。


如果没有一个调整大小事情,我会建议检查这个CSS属性

background-size: contain; 
+0

井宽高比div' = 154/75 = 2.05'相同的宽高比,并且结果的宽高比是“108/75 = 144”,这不等于比率的DIV。 Acutally我生成一个PDF,最初图像的大小和剪裁匹配占位符div(您指定的方法)的确切大小。通过这种方式,效果不佳,所生成的PDF中的图像太模糊(因为图像被缩小并裁剪以匹配占位符的大小)。现在我想裁剪和调整与占位符相同宽高比的图像,但是这次更大的尺寸,更接近图像的原始宽度和高度 – Sharmila

+0

对于谁投降,至少给一个理由,谢谢... –