Question

全部，我有以下代码在我的页面上显示图像：

$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？

由于

Answer 1

从您的css中删除此属性

.bd-flickr-item img{
/*width:100%; 
    height:auto; */
}

Answer 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
}

指定宽度和高度。只需删除它们。

Answer 3

我可以看到为什么你的图片不会是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"

为什么？'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
}

图像宽度和高度没有按照我指定的大小调整

3 个答案: