2

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

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

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

这是我获取图像的代码：

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

4 回答 4

1

使用这个 CSS：

img {
  max-width: 500px;
}

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

于 2013-03-12T08:08:58.900 回答
0 
{echo "<tr><td colspan='2' style='width:500px;height:500px;'><img src='http://xxxx.se/ok/eventbilder/"   . $row['photo'] .  "'></td></tr>";}
于 2013-03-12T08:13:33.197 回答
0

您需要自适应缩放：此函数获取您的图像路径并返回相应缩放的 $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); 
   }
于 2013-03-12T08:16:54.477 回答
0

你也可以给<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.如果您有更多这样的图像以不同的尺寸显示，您可以进行多种组合

于 2013-03-12T08:24:33.487 回答