如何在不拉伸的情况下以特定尺寸显示图像？

Question

我尝试了以下操作，但只有在图像高于宽度时才能使用。没有PHP（我知道timthumb）最好的方法是什么，最好不要使用Javascript？

<div style="height:100px;width:100px;overflow:hidden;">
<img src="image.jpg" style="width:100px;" />
</div>

Answer 1

在这种情况下，仅使用css

无法保持图像w / h比率

将来我们会有

<div style="height:100px;width:100px;background-color:red;
background-image:url('asd (2).jpg');background-size:contain;
background-repeat:no-repeat;background-position:center;"></div>

使用firefox / webkit，可能是opera

所以现在你需要javascript！

希望这会有所帮助

Answer 2

你可以使用PHP GD和图像函数getImageSize（） docs

然后根据您想要的比例计算出尺寸来渲染您的html。

Answer 3

我能想到没有php的最好方法是使用图像作为div的背景 - 所以

<div style="height:100px; width:100px; 
background:url('whatever.jpg') no-repeat center center;"> </div>

显然溢出会被切断，但你的尺寸已经分类了。