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

问题描述：

All, I have the following code to display an image on my page:

$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

I'm trying to specify that I want the image width and height to be 192px X 192px and I thought by specifying it that would be acheived. The images being displayed on different heights though. I do have some CSS that came with the theme and here is the 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
}

Can anyone see why my images wouldn't be 192px X 192px?

Thanks

答

See this:

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

The width and height is specified. Just remove them.

答

Remove this property from your css

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

答

I can see why your images wouldn't be 192px X 192px!

in your html markup from the javascript output

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

replace with :

height="192" width="192"

Why ? The 'width' attribute does not have a valid value: It must be an integer, or an integer percentage.

After, remove width and height from this .css selector

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

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

相关推荐