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

個人的には、CSSをCSSファイルに入れます。

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

次に、とにかくjQueryを使用しているので。

$("span").each(function() {
    $(this).addClass("addBackground");
});
于 2013-02-28T16:45:09.353 に答える
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;
}

とにかくCSSファイルを作成するためにディレクトリを反復処理しているため、JSではなくPHPを使用してページにマークアップを作成します。お役に立てれば。

于 2013-02-28T23:47:31.440 に答える
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));
}

これにより、画像が動的に作成されます。これはあなたの質問でしたか？

絶対画像パスに注意する必要があります。配列内で絶対 URL を渡す場合、かっこ内に画像フォルダーが必要ないことは明らかだと思います。

于 2013-02-28T16:32:58.413 に答える