Question

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

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

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

这是获取图片的代码：

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

Answer 1

使用这个CSS：

img {
  max-width: 500px;
}

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

Answer 2

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

Answer 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); 
   }

Answer 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.如果您有更多类似的图像以显示不同的尺寸，您可以制作多种组合

从数据库获取时，在<img/>中设置imagesize

4 个答案: