圖像的寬度和高度，我指定

所有，不施膠，我有以下的代碼到我的網頁上顯示的圖像：圖像的寬度和高度，我指定

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

感謝

來源

2013-02-28 user1048676

去除寬度和高度既然沒有人可以運行你的代碼：你看到的呢？ – 2013-02-28 14:50:57

您不需要圖像標記上的寬度和高度屬性中的px – Pete 2013-02-28 14:51:02

圖像的高度不同。所以一個圖像是192pxX128px，然後是另一個是192pxX288px，他們只是不斷變化。 – user1048676 2013-02-28 14:52:23

看到這個：

.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-28 14:51:38 ATOzTOA

沒有人看到img標記屬性中的錯誤？使用錯誤值設置屬性「寬度」或「高度」，< img >將不適用於圖像 – 2013-02-28 16:50:33

@MilchePatern沒有錯誤，用'px'指定'height'和'width'工作正常。 – ATOzTOA 2013-02-28 17:35:47

ATOzTOA你能否確認你對< img >標記中錯誤單位的最新評論？ – 2013-02-28 17:46:09

從你的CSS刪除此屬性

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

來源

2013-02-28 14:51:16 Sachin

您沒有看到img標記屬性中的錯誤嗎？ – 2013-02-28 16:49:01

我可以看到爲什麼你的圖像不會是192px×192px！

height="192" width="192"

爲什麼：

從JavaScript的輸出

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

你的HTML標記替換爲？「寬度」屬性沒有有效值：它必須是整數或整數百分比。

後，從該的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-28 15:00:46

圖像的寬度和高度，我指定

回答

相關問題