从数据库获取图像时，在 <img></img> 中设置图像大小答案

【问题标题】：Set imagesize in <img></img>, when getting it from a db从数据库获取图像时，在 <img></img> 中设置图像大小
【发布时间】：2013-02-27 15:53:51
【问题描述】：

我有一个“回声”，它正在从我的数据库中获取图像，但是，当我上传它时，它会自动将大小更改为 200x113 像素。我不希望图片被缩放那么多，我希望它是这样的：

我想要一个大约 500x500px 的“盒子”，所以例如当我上传一张超过 500px 的图片时，它会缩小到只有 500px 宽，但要保持比例。

总结：我想为图片设置一个最大尺寸，当我用代码将它放到屏幕上时。它应该适合那个尺寸并保持它的比例。

这是我获取图像的代码：

{echo "<tr><td colspan='2'><img src='http://xxxx.se/ok/eventbilder/"   . $row['photo'] .  "'></td></tr>";}

【问题讨论】：

你说的是保持纵横比吗？
您是只想显示缩放后的图像，还是真的想在服务器上将图像缩放到合适的大小，然后再发送到客户端？
我看到很多“我想要...” - 是否有问题隐藏在某个地方？

标签： php html css image

【解决方案1】：

使用这个 CSS：

img {
  max-width: 500px;
}

或在您的 td 上设置 width 并使图像宽度为 100%。确保只设置高度或宽度，否则图像不会（自动）保持其比例。

【讨论】：

这个范围有限，适用于所有图片
这是一个说明它可以如何工作的例子。我不从事勺子喂养业务。

【解决方案2】：

{echo "<tr><td colspan='2' style='width:500px;height:500px;'><img src='http://xxxx.se/ok/eventbilder/"   . $row['photo'] .  "'></td></tr>";}

【讨论】：

内联样式搞砸了比例，哎哟！

【解决方案3】：

您需要自适应缩放：此函数获取您的图像路径并返回相应缩放的 $x 和 $y。这里我们假设一个容器框宽度为 $w 像素，高度为 $h 像素

   // get size
   $size = getimagesize($your_image_file_path);
   $x = $size[0];
   $y = $size[1];

   // container box
   $w = 500;
   $h = 500;

   $ratio = $x / $y;    

   // resize image
   if($x > $w)
   {
      $x = $w;
      $y = floor($x / $ratio); 
   }

   if($y > $h)
   {
      $y = $h;
      $x = floor($y * $ratio); 
   }

【讨论】：

【解决方案4】：

你也可以给<img>上课，比如<img class="dbimg" src="from database"></img>

并将所有样式赋予该类

.dbimg{
width:auto;
max-width:500px; //by only define width it will automatically takes up height as per its proportions 
//other styling  
}

而使用这种方法的好处是

1.你可以在一个类中任意设置img，不需要每次都写代码

和

2.如果您有更多这样的图像以不同的尺寸显示，您可以进行多种组合

【讨论】：