Question

我有一个我想要显示的图像列表。图像具有不同的宽度和高度，我想将它们全部放入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乘75 ...这样图像适合框 - 这就是我使用背景图像属性的原因......

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

如何为每个新的li＆gt; div动态添加此背景图片？

示例：

$(function() {

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

如何制作此动态，而无需为每个div指定背景图像...

谢谢！

Answer 1

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

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

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

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

Answer 2

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

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

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

$("span").each(function() {
    $(this).addClass("addBackground");
});

Answer 3

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文件。希望这会有所帮助。

动态地将背景图像添加到多个元素

3 个答案: