1

我正在建立一个Wordpress 网站。请不要介意我不在本地或测试服务器或我的代码上工作。当我试图弄清楚这个编程位时，它现在很乱。通过访问我的网站，您会在顶部看到一排图像，位于 jcarousel 中。

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

所以我想在玩了 3 天后我明白了这一点——我无法告诉你我使用了多少轮播代码。最初我认为这是问题所在，有些是。我发现，每张图片幻灯片的宽度都是在 JavaScript 中设置的，所以如果我给它一个 640 的宽度，我会得到和现在一样的结果。

我的第一个问题是这样的：

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

<?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，但我不确定如何在我现有的代码中实现它。

有人可以帮我重写吗？

4

2 回答 2

1

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

宽度 100%，顶部 -50%

<?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>';
?>
于 2013-01-30T19:50:52.170 回答
0

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

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

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

再次感谢您的回复。

于 2013-01-31T04:37:55.587 回答