我有一个“echo”,它从我的数据库中获取图像,但是,当我上传它时,它会自动将大小更改为200x113px。我不希望图片缩放那么多,我希望它像:
我希望有一个大约500x500px的“盒子”,所以例如当我上传长度超过500px的图片时,它会缩小到只有500px宽,但保持其比例。
总结:我想设置图片的最大尺寸,当我用代码将它带到屏幕上时。它应该适合这个尺寸并保持其比例。
这是获取图片的代码:
{echo "<tr><td colspan='2'><img src='http://xxxx.se/ok/eventbilder/" . $row['photo'] . "'></td></tr>";}
答案 0 :(得分:1)
使用这个CSS:
img {
max-width: 500px;
}
或在您的td上设置width
并使图片宽度为100%。确保你只设置高度或宽度,否则图像不会(自动)保持它的比例。
答案 1 :(得分:0)
{echo "<tr><td colspan='2' style='width:500px;height:500px;'><img src='http://xxxx.se/ok/eventbilder/" . $row['photo'] . "'></td></tr>";}
答案 2 :(得分: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);
}
答案 3 :(得分: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.如果您有更多类似的图像以显示不同的尺寸,您可以制作多种组合