在现有PHP代码中显示实际图像大小

Question

我正在构建Wordpress website。请不要介意我没有在本地或测试服务器或我的代码上工作。当我试图找出这个编程位时，它现在很乱。通过访问我的网站，您将在顶部看到一排图像，这些图像位于jcarousel内。

它有效，但是如果你到达下一个直到你看到“肖像”照片，那就有一个差距。差距是因为我必须在HTML或CSS中设置宽度（以像素为单位）才能使轮播正常工作。如果设置为auto，则轮播会崩溃。对我来说很有意义，但是我无法解决这个问题令人沮丧。我希望“风景”和“肖像”照片具有相同的高度427，但宽度我希望它能够根据实际图像大小进行自我调整。

所以我想在玩了3天后我理解了这一点 - 我不能告诉你我用了多少个轮播代码。最初我认为这是问题，有些人是。我发现，每张图片幻灯片的宽度都是在JavaScript中设置的，所以如果我给它宽度为640，我会得到与现在相同的结果。

我的第一个问题是：

我从我服务器上的一个目录中调用我的图像，专门为Wordpress（author）编写。这是代码：

<?php
$uploads = wp_upload_dir();

if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
    if ($file != "." && $file != "..") {
        $images[] = $file; 
    }
}
closedir($dir);
}

echo '<ul>';
foreach($images as $image) {
echo '<li><img src="';
echo $uploads['baseurl'].'/picture-atlantic/'.$image;
echo '" alt="" width="auto" height="auto" /></li>';
 }
echo '</ul>';
?>

正如你所看到的，它是从图片 - 大西洋目录调用并在无序列表中显示，这是我的jcarousel出于某种原因所必需的。

最后：我如何使用相同的代码来获取图像，还能以实际尺寸显示它们？在上面的代码中，如果我定义宽度和高度，它会为所有图像执行。但是，正如我之前提到的，我有使用不同尺寸的肖像照片。我找到了这段代码：erikastokes.com/php/how-to-get-image-size-with-php.php，但我不确定如何在现有代码中实现它。

有人可以帮我改写一下吗？

Answer 1

您可以将图片的宽度设置为100%并添加样式以在top: -50%;处重新定位肖像图像，但如果它是横向的，您将无法看到整个图像。 / p>

<?php
$uploads = wp_upload_dir();

if ($dir = opendir($uploads['basedir'].'/picture-atlantic')) {
$images = array();
while (false !== ($file = readdir($dir))) {
    if ($file != "." && $file != "..") {
        $images[] = $file; 
    }
}
closedir($dir);
}

echo '<ul>';
foreach($images as $image) {
  $myimage = $uploads['baseurl'].'/picture-atlantic/'.$image;
  $size = getimagesize($myimage);
  $top_50 = '';
  if($size[1] > $size[0]) {
    $top_50 = 'style="position: realative; top: -50%;"';
  }
  echo '<li><img src="';
  echo $uploads['baseurl'].'/picture-atlantic/'.$image;
  echo '" alt="" width="100%" height="auto" '.$top_50.'/></li>';
 }
echo '</ul>';
?>

Answer 2

Welp，我读到如果我已经使用php动态显示我的图像，我就不能使用getimagesize。我最终决定通过Wordpress在无序列表中上传图像，并将我的轮播标记放在后循环中。它现在运作得很好。

哦，我在http://www.css-tricks.com上看到Wordpress会自动添加图像属性，这就解决了图像宽度问题，同时在屏幕上以100％的比例显示横向和纵向样式照片。

对于那些尝试执行类似任务的人，请勿使用jj nexgen gallery插入图像。 jj nexgen gallery是一个很棒的插件，以及与之相关的其他插件。它只是不适用于我试图做的事情，因为它没有为图像添加属性。如果你不想这样做，我会下载他们的wordpress插件，所以我猜你们大多数人。

再次感谢您的回复。