1

すべて、ページに画像を表示するための次のコードがあります。

$output .= '<div id="bd-flickr">';
    for($i=0; $i<$count_photos; $i++){
        if($xml->channel->item[$i]){
                preg_match( $regx, $xml->channel->item[$i]->description, $matches );
                $img_url = str_replace("_m.jpg", "_z.jpg", $matches[1]);
                $output .= '<div class="bd-flickr-item">';
                $output .= '<a rel="flickr-widget" class="fancybox" title="&lt;a target=&quot;_blank&quot; href=&quot;'.$xml->channel->item[$i]->link.'&quot;&gt;View in Flickr&lt;/a&gt;" href="' . $img_url .'">';
                $output .= '<img src="'.$img_url.'" height="192px" width="192px" alt="'. $xml->channel->item[$i]->title .'" title="'. $xml->channel->item[$i]->title .'">';
                $output .= '</a>';
                $output .= '</div>';
        }
    }
    $output .= '</div><div style="clear:both; float:none"></div>';
    echo $output

画像の幅と高さを192pxX192pxにするように指定しようとしていますが、それを指定することで実現できると思いました。ただし、画像はさまざまな高さで表示されています。テーマに付属しているCSSがいくつかあります。CSSは次のとおりです。

#bd-flickr {min-height:270px}

.bd-flickr-item {
    width:20%;  
    height:auto;  
    float:left; 
    margin:0!important;
    padding:0!important
}

.bd-flickr-item img{
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    width:100%; 
    height:auto; 
    margin:0!important;
    padding:0!important; 
    display:block
}

html .bd-flickr-item img{
    box-shadow:none!important;
    -webkit-box-shadow:none!important;
    -moz-box-shadow:none!important;
    -o-box-shadow:none!important;
}

.bd-flickr-item img:hover{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}

a.bd-flickr-link {
    background:#000000 url(../img/camera.png) no-repeat center center; 
    display:block
}

私の画像が192pxX192pxにならない理由を誰かが理解できますか？

ありがとう

4

3 に答える 3

4

CSS からこのプロパティを削除します

.bd-flickr-item img{
/*width:100%; 
    height:auto; */
}
于 2013-02-28T14:51:16.483 に答える
2

これを参照してください：

.bd-flickr-item img{
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;

    /* Issue here */
    width:100%; 
    height:auto; 

    margin:0!important;
    padding:0!important; 
    display:block
}

幅と高さが指定されています。それらを削除するだけです。

于 2013-02-28T14:51:38.163 に答える
1

あなたの画像が 192px X 192px にならない理由がわかりました!

JavaScript出力からのHTMLマークアップで

$output .= '<img src="'.$img_url.'" height="192px" width="192px" alt="'. $xml->channel->item[$i]->title .'" title="'. $xml->channel->item[$i]->title .'">';

-->    height="192px" width="192px"

と置換する ：

height="192" width="192"

なんで ？「幅」属性に有効な値がありません: 整数または整数のパーセンテージである必要があります。

その後、この .css セレクターから幅と高さを削除します

.bd-flickr-item img {
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    /*width:100%; */
    /*height:auto;*/
    margin:0!important;
    padding:0!important; 
    display:block
}
于 2013-02-28T15:00:46.130 に答える