如何在保持比例的同时在纯HTML/CSS中调整图像大小？

Question

如何仅使用HTML/CSS调整图像大小(即没有服务器代码),同时保持其比例并具有裁剪效果.细节:我希望将其调整到指定的宽度,保持比例,如果高度大于指定值,则将其裁剪到指定的高度？

实际上,我知道如何使用一些服务器代码,但我不想这样做.这意味着使用不同的文件引用并参考图片<img src="picture.php" />.我需要在显示它的同一页面中处理图像.

什么"困扰"我是我必须发送图像标题,以便页面上没有其他内容显示.

有没有办法做那样的事情？也许来自纯HTML/CSS？:P

我做了一个像这样的功能(除了"裁剪"的东西),它只返回width="" height="",我就像这样使用它<img src="image.jpg" resize("image.jpg") />,但我不知道我怎么能做那个裁剪......

谢谢

Answer 1

好的,所以我设法找到一种方法来做html/css.整个想法是摆脱"超高":

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

首先将我的图像调整到所需的宽度(保持比例),然后给包含div的固定高度,setting overflow to hidden并使脚本只显示图像的所需部分.