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

我试图指定我希望图像的宽度和高度为 192px X 192px，我认为通过指定它可以实现。虽然图像显示在不同的高度。我确实有一些主题附带的 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
}

谁能明白为什么我的图片不是 192px X 192px？

谢谢

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

我明白为什么您的图像不会是 192 像素 X 192 像素！

在来自 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"

为什么 ？'width' 属性没有有效值：它必须是整数或整数百分比。

之后，从此 .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 回答