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

【问题标题】：How can I display images at certain dimensions without stretching it?如何在不拉伸的情况下以特定尺寸显示图像？
【发布时间】：2011-10-08 02:22:27
【问题描述】：

我尝试了以下方法，但仅在图像高于其宽度时才有效。没有 PHP（我知道 timthumb）并且最好没有 Javascript 的最佳方法是什么？

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

【问题讨论】：

标签： php html css image

【解决方案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！

希望对你有帮助

【讨论】：

【解决方案2】：

您可以使用 PHP GD 和图像函数 getImageSize() docs

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

【讨论】：

【解决方案3】：

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

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

显然溢出会被截断，但您的尺寸已排序。

【讨论】：

小心；默认情况下，在许多浏览器上，背景图像不会被打印出来。