容器中显示的图像 - 如何按比例缩小并保持纵横比

Posted 2023-03-06

【中文标题】容器中显示的图像 - 如何按比例缩小并保持纵横比

【英文标题】：Image shown in a container - how to scale down and maintain aspect ratio

【发布时间】：2013-09-19 06:41:42

【问题描述】：

我的图片有 250x250 像素的空间。图片保存在服务器上，文件名保存在数据库中。

现在我只设置了 img-src 标签和 width=250 和 height = 250 - 但是会发生什么情况，因为我破坏了关系，所以它更高然后更亮的图片不会以正确的关系显示。

那么如何设置正确的宽度和高度，最大为 250 像素，但在图像的关系范围内？

【参考方案1】：

试试这个：

<div style="height: 250px;width:250px">
    <img src="yourimage.jpg" style="max-width: 100%; max-height: 100%;">
</div>

【讨论】：

不允许我的代码将其包装在 div.container 中，抱歉。我需要一个后端解决方案。

【参考方案2】：

我处理这个：

 System.Drawing.Image img = System.Drawing.Image.FromFile(path);
                int height = img.Height;
                int width = img.Width;

                string hwText = "";

                if (height > width) //Höher als Breiter
                
                    hwText = "height='250px'";
                
                else //Breiter als Höher
                
                    hwText = "width='250px'";