0

我有一个要显示的图像列表。图像具有不同的宽度和高度，我想将它们全部放入一个 li 元素中，但是 li 元素对于每个子图像应该具有相同的尺寸。

解决这个问题的唯一方法（以便图像适合标准尺寸的 li 框）是将图像指定为 li 元素的背景：

<ul>
      <li>
        <div></div>
        <span>Image1</span>
      </li>
      <li>
        <div></div>
        <span>Image2</span>
      </li> 
      <li>
        <div></div>
        <span>Image3</span>
      </li> 
      <li>
        <div></div>
        <span>Image4</span>
      </li>   
    ...and many more  
</ul>

CSS：

ul li {       
        width: 75px;  
        height: 75px;
      }


ul li div{
        background-image: url('genereic path calculated in jquery');
        background-size: contain;  /*IMPORTANT THIS!*/
      }

所有图像都应调整为 75 x 75...以便图像适合框 - 这就是我使用背景图像属性的原因...

基本上，我可以为每个图像执行此操作，但我有很多图像......所以我需要为每个列表项子 div 指定背景图像......

如何为每个新的 li>div 动态添加此背景图像？

例子：

$(function() {

    $( "li div" ).each(function() {
      $(this).css('background-image','url(images/' + 'imagetitle)');
  });
});

我怎样才能使这个动态，而不必为每个 div 指定背景图像......

谢谢！

4

3 回答 3

0

PHP代码：

<?php


function createGallery() {
if ($pwd = opendir('./images/')) {

    /* Loop over the directory. */
    while (false !== ($file = readdir($pwd))) {
        $file_name = pathinfo($file);
        $fn = $file_name['filename'];

            if ($file_name['extension'] == "png") {

                doCSS($fn, $file);

            }

    }
    closedir($pwd);
}
}

function doCSS($fn, $image) {
$cssFile = "./gallery.css";

if (file_exists($cssFile)) {
    // Attempt to open for append
    $fh = fopen($cssFile, "a") or die("Error opening file.");
} else {
    // Attempt to create
    $fh = fopen($cssFile, "w") or die("Error opening file.");
}

        $string = "#".$fn." { background: url(./images/".$image."); } ";
    // Write to file
    fwrite($fh, $string);


fclose($fh);    
}

createGallery();

?>

输出到 gallery.css

#photo1 { background: url(./images/photo1.png); } #photo3 { background: url(./images/photo3.png); } #photo3menu_OLD { background: url(./images/photo3menu_OLD.png); } #photo1small { background: url(./images/photo1small.png); } #photo3menu { background: url(./images/photo3menu.png); } #photo3small { background: url(./images/photo3small.png); } #photo4 { background: url(./images/photo4.png); } #photo4details { background: url(./images/photo4details.png); }

就个人而言，我会编写一个用于定位 div 和修复尺寸的类，并将其包含在您的主页 CSS 文件中，如下所示： -

.dimensions {
    position: relative;
    width: 75px; height: 75px; display: block;
}

我也将使用 PHP 在页面上创建标记，而不是使用 JS，因为无论如何您都在遍历目录以创建 CSS 文件。希望这可以帮助。

于 2013-02-28T23:47:31.440 回答
0

就个人而言，我会将 CSS 放在 CSS 文件中。

.addBackground {
   background: url(./path_to_my_image.png);
}

然后，无论如何你都在使用 jQuery..

$("span").each(function() {
    $(this).addClass("addBackground");
});
于 2013-02-28T16:45:09.353 回答
0

首先，您将拥有包含图像的任何数据源，对吗？从中创建一个数组。

var liArray = { 'url1', 'url2', 'url3' };

然后尝试for循环

for(i=0, i<liArray.length,i=i+1)
{
var odv = $.create("li");
odv.css('background-image','url(images/' + liArray[i])');
odv.appendTo($(ul));
}

这将动态创建您的图像。这是你的问题吗？

您必须注意您的绝对图像路径。我认为很明显，如果您在数组中传递绝对网址，则在括号内不需要图像文件夹。

于 2013-02-28T16:32:58.413 回答