如何控制圖像的大小？

**css File** 

#zDIV_slideShow a {color:#fff;background-color:#fff} 
#zDIV_slideShow {display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;text-align:center;margin:0;z-index:10IE Mac;} 

**js File** 


var TJK_gallery; 
var TJK_anchor; 
var TJK_itemNumber; 
var TJK_stage; 
var TJK_itemTitle; 
var TJK_itemDescription; 
var TJK_navPrev; 
var TJK_navClose; 
var TJK_navNext; 
var TJK_zCounter; 
var TJK_zImage; 
function TJK_Gallery(zElement){ 
TJK_gallery=zElement; 
TJK_anchor = document.getElementById(TJK_gallery).getElementsByTagName("a"); 
// building the whole thing from scratch starting with the slideshow 
// zDIV_slideShow 
     var zDiv_wrapper = document.createElement('div'); 
     document.getElementsByTagName("body")[0].appendChild(zDiv_wrapper); 
     zDiv_wrapper.id="zDIV_slideShow"; 
// zA_previous 
     var zA_1 = document.createElement('a'); 
     var zImg_1 = document.createElement('img');  
     zDiv_wrapper.appendChild(zA_1); 
     zA_1.id = "zA_previous"; 
     zA_1.title = "Previous Slide"; 
     zA_1.href = "#null"; 
     zA_1.appendChild(zImg_1); 
     zImg_1.src="img/previous.gif"; 
     zImg_1.alt="Previous Slide";   
// zA_close  
     var zA_2 = document.createElement('a'); 
     var zImg_2 = document.createElement('img');  
     zDiv_wrapper.appendChild(zA_2);  
     zA_2.id = "zA_close"; 
     zA_2.title = "Back to the Gallery"; 
     zA_2.href = "#null"; 
     zA_2.appendChild(zImg_2); 
     zImg_2.src="img/close.gif"; 
     zImg_2.alt="Back to the Gallery"; 
// zA_next  
     var zA_3 = document.createElement('a'); 
     var zImg_3 = document.createElement('img'); 
     zDiv_wrapper.appendChild(zA_3); 
     zA_3.id = "zA_next"; 
     zA_3.title = "Next Slide"; 
     zA_3.href = "#null"; 
     zA_3.appendChild(zImg_3); 
     zImg_3.src="img/next.gif"; 
     zImg_3.alt="Next Slide"; 
// zA_title  
     var zA_4 = document.createElement('a'); 
     zDiv_wrapper.appendChild(zA_4); 
     var zTitle = document.createTextNode("Title"); 
     zA_4.id = "zA_title"; 
     zA_4.appendChild(zTitle);  
// zDIV_counter 
     var zDiv_counter = document.createElement('div'); 
     var TJK_zCounter = document.createTextNode("Keeping track"); 
     zDiv_wrapper.appendChild(zDiv_counter); 
     zDiv_counter.id="zDIV_counter"; 
     zDiv_counter.appendChild(TJK_zCounter); 
// zA_image  
     var zA_6 = document.createElement('a'); 
     var zImg_6 = document.createElement('img'); 
     zDiv_wrapper.appendChild(zA_6); 
     zA_6.id = "zA_image"; 
     zA_6.appendChild(zImg_6); 
     zImg_6.id="zIMG"; 
// zA_description  
     var zA_5 = document.createElement('a'); 
     var zDescription = document.createTextNode("Description"); 
     zDiv_wrapper.appendChild(zA_5); 
     zA_5.id = "zA_description"; 
     zA_5.href = "#";  
     zA_5.appendChild(zDescription);   
     for (var x=0,i=TJK_anchor.length;x<i;x++){ 
     TJK_anchor[x].onclick = badabingbadaboum; 
// we create fragment identifier to be used to navigate and keep track of the items and we kick start the whole thing 
     TJK_anchor[x].href = TJK_anchor[x].href+"#"+x; 
// we create a container to receive the text links 
     var zSPAN = document.createElement('span'); 
     TJK_anchor[x].appendChild(zSPAN); 
     var zTextLink = document.createTextNode(TJK_anchor[x].title); 
     zSPAN.appendChild(zTextLink); 
     } 
} 
function goPrevious() { 
TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1)); 
    // hiding the button if we are on first slide 
    if(TJK_itemNumber==1)this.className="transparent"; 
    TJK_navNext.className="nonOpaque"; 
    if(TJK_itemNumber==0){return} // we are at the beginning  
     TJK_zImage.src = TJK_anchor[TJK_itemNumber-1].href; 
     TJK_zImage.alt = TJK_itemTitle.firstChild.data;  
     TJK_itemTitle.href = TJK_anchor[TJK_itemNumber-1].href; 
     TJK_itemTitle.firstChild.data = TJK_anchor[TJK_itemNumber-1].getElementsByTagName("img")[0].alt; 
     TJK_itemDescription.firstChild.data = TJK_anchor[TJK_itemNumber-1].title; 
    // special care for this one in case there is no long description set  
    if(TJK_anchor[TJK_itemNumber-1].getElementsByTagName("img")[0].longDesc){ 
     TJK_itemDescription.href = TJK_anchor[TJK_itemNumber-1].getElementsByTagName("img")[0].longDesc;  
    // appendData() breaks IE5 Win 
     TJK_itemDescription.firstChild.data=TJK_anchor[TJK_itemNumber-1].title+" [more info...]"; 
     TJK_itemDescription.title = "Follow this link for more Information";  
     TJK_itemDescription.className="noHand"; 
     TJK_itemDescription.style.textDecoration ="underline"; 
    }else{ 
     TJK_itemDescription.className="withHand"; 
     TJK_itemDescription.title=""; 
     TJK_itemDescription.href="#"; 
     TJK_itemDescription.style.textDecoration ="none"; 
     } 
// we update the value of the counter in the DIV 
var current = eval(document.getElementById("zA_title").hash.substring(1)) + 1; 
TJK_zCounter.firstChild.data = "Item #"+current+" out of "+TJK_anchor.length; 
} 
function goNext() { 
TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1)); 
// hiding the button if we are on the last slide 
    if(TJK_itemNumber==TJK_anchor.length-2)this.className="transparent"; 
     TJK_navPrev.className="nonOpaque"; 
    if(TJK_anchor.length == TJK_itemNumber+1){return} // we are at the end 
     TJK_zImage.src = TJK_anchor[TJK_itemNumber+1].href; 
     TJK_zImage.alt = TJK_itemTitle.firstChild.data;  
     TJK_itemTitle.href = TJK_anchor[TJK_itemNumber+1].href; 
     TJK_itemTitle.firstChild.data = TJK_anchor[TJK_itemNumber+1].getElementsByTagName("img")[0].alt; 
     TJK_itemDescription.firstChild.data = TJK_anchor[TJK_itemNumber+1].title; 
// special care for this one in case there is no long description set  
    if(TJK_anchor[TJK_itemNumber+1].getElementsByTagName("img")[0].longDesc){ 
     TJK_itemDescription.href = TJK_anchor[TJK_itemNumber+1].getElementsByTagName("img")[0].longDesc;  
// appendData() breaks IE5 Win 
     TJK_itemDescription.firstChild.nodeValue=TJK_anchor[TJK_itemNumber+1].title+" [more info...]"; 
     TJK_itemDescription.title = "Follow this link for more Information";  
     TJK_itemDescription.className 
="noHand"; 
     TJK_itemDescription.style.textDecoration ="underline"; 
    }else{ 
     TJK_itemDescription.className 
="noHand"; 
     TJK_itemDescription.title=""; 
     TJK_itemDescription.href="#"; 
     TJK_itemDescription.style.textDecoration ="none"; 
    } 
// we update the value of the counter in the DIV 
var current = eval(document.getElementById("zA_title").hash.substring(1)) + 1; 
TJK_zCounter.firstChild.data = "Item #"+current+" out of "+TJK_anchor.length; 
} 
// to make sure users don't follow the link in the title (it is there to be used as a match with the thumbnail that triggered the popup DIV) 
function fakeIt() {return false} 
// hiding the SlideShow 
function hideTJK_stage() { 
document.getElementById("zDIV_slideShow").style.height="0"; // IE5 Mac 
document.getElementById("zDIV_slideShow").style.overflow="hidden"; // IE5 Mac 
document.getElementById("zDIV_slideShow").style.display="none"; 
// we remove the opacity stuff 
document.getElementById("wrapper").className="none"; 
// we set focus back to the thumbnail that triggered the "popup" DIV 
var TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1)); 
TJK_anchor[TJK_itemNumber].focus(); 
} 
function badabingbadaboum() { 
TJK_stage = document.getElementById("zDIV_slideShow"); 
TJK_itemTitle = document.getElementById("zA_title"); 
TJK_itemDescription = document.getElementById("zA_description"); 
TJK_navPrev = document.getElementById("zA_previous"); 
TJK_navClose = document.getElementById("zA_close"); 
TJK_navNext = document.getElementById("zA_next"); 
TJK_zCounter = document.getElementById("zDIV_counter"); 
TJK_zImage = document.getElementById("zA_image").getElementsByTagName("img")[0]; 
// we do some opacity stuff 
    document.getElementById("wrapper").className="transparent"; 
// IE5 Mac (phantom links) 
// this.blur(); 
// this is to reset the fix for IE Mac (see statement in (hideTJK_stage()) 
    TJK_stage.style.height="20%"; 
    TJK_stage.style.display="block"; 
    TJK_zImage.src = this.href.replace(this.hash,""); 
    TJK_zImage.alt = this.getElementsByTagName("img")[0].alt; 
    TJK_zImage.onclick = hideTJK_stage; 
// "style.cursor" breaks IE5 
    TJK_zImage.className = "hand"; 
    TJK_zImage.title = "Back to the Gallery"; 
// the href value we set for this anchor will be used to give focus back to the appropriate thumbnail 
    TJK_itemTitle.setAttribute("href",this.href); 
// since we have a real href value in there we don't want the user to trigger the link 
    TJK_itemTitle.onclick=fakeIt; 
// clicking on the close box will close the popup DIV 
    TJK_navClose.onclick=hideTJK_stage; 
// setting the action for the prev/next links 
    TJK_navPrev.onclick=goPrevious; 
    TJK_navNext.onclick=goNext; 
// now we can set focus for keyboard users 
    TJK_navPrev.focus(); 
// setting the height - mainly for IE - the second one is for IE5 
    TJK_stage.style.height = (document.documentElement.clientHeight > 0) ? document.documentElement.clientHeight+"px" : document.body.clientHeight+"px"; 
// setting the width for IE 5 so there is no gap near the scrollbar 
    if(document.documentElement.clientHeight == 0)TJK_stage.style.width=document.body.clientWidth+"px" ; 
// setting the title and description 
     TJK_itemTitle.firstChild.data = this.getElementsByTagName("img")[0].alt; 
     TJK_itemDescription.firstChild.data = this.title; 
// if there is a long description in there, we use it as href value of the short description and we give it a title to. If there is none we make sure we reset values previously set and we do not let the user follow the "empty" link 
    if(this.getElementsByTagName("img")[0].longDesc){ 
     TJK_itemDescription.href = this.getElementsByTagName("img")[0].longDesc;  
// appendData() breaks IE5 Win 
     TJK_itemDescription.firstChild.data=this.title+" [more info...]"; 
     TJK_itemDescription.title = "Follow this link for more Information";  
    }else{ 
     TJK_itemDescription.removeAttribute("href");  
     TJK_itemDescription.title = ""; 
} 
// we set the starting values for the "counter" 
var current = eval(TJK_itemTitle.hash.substring(1)) + 1; 
TJK_zCounter.firstChild.nodeValue = "Slide #"+current+" out of "+TJK_anchor.length; 
// hiding the button when everything "loads" depending on which slide we are on 
// first we reset both buttons in case they have been turned off last time the user left the slideshow 
TJK_navNext.className="nonOpaque"; 
TJK_navPrev.className="nonOpaque"; 
TJK_itemNumber = eval(document.getElementById("zA_title").hash.substring(1)); 
    if(TJK_itemNumber==0){ 
     TJK_navPrev.className="transparent"; 
     TJK_navNext.className="nonOpaque"; 
    } 
    if(TJK_itemNumber==document.getElementById(TJK_gallery).getElementsByTagName("a").length-1){ 
     TJK_navNext.className="transparent"; 
     TJK_navPrev.className="nonOpaque"; 
    } 
return false; 
} 


**in jsp** 

<ul id="gallery" > 
    <li><a name="zGallery" href="img/NNG.jpg"><img src="img/noida.png" /></a></li> 
    <li><a href="img/002.jpg"><img src="img/gurgaon.png" /></a></li> 
    <li><a href="img/003.jpg"><img src="img/bhiwadi.png" /></a></li> 
    <li><a href="img/004.jpg"><img src="img/sohna.png" /></a></li> 
    <li><a href="img/005.jpg"><img src="img/YamunaExpressway.png" width="260" /></a></li> 

    </ul>

我正在使用圖像作爲鏈接，因此當您單擊新圖像時將在當前頁面上打開。我想控制圖像的大小。我有很高的像素圖像，因此它覆蓋了我所有的頁面。那麼，我需要什麼樣的更改或額外的代碼來控制圖像的大小.....如何控制圖像的大小？

來源

2013-12-12 Abhishek Kanth

你應該只把相關的代碼。 –

這是我有一個div爲一個例子（寬度：500，高度：300）將包含這樣的圖像和圖像（1000像素X 500像素）：

<div style="width: 500px; height: 300px;" id="container"> 
    <img src="yourUrl" id="image"/> 
</div>

在javascript中我會做這樣的：

document.getElementById('image').onload = function(){ 
    if(this.naturalWidth > this.naturalHeight){ 
    this.style.Width = document.getElementById('container').style.Width + " !important"; 
    this.style.Height = "auto !important"; 
    } 
    else{ 
    this.style.Height = document.getElementById('container').style.Height + " !important"; 
    this.style.Width = "auto !important"; 
    } 
}

來源

2013-12-12 09:34:48 HICURIN

您可以指定基於像素或百分比的圖像的height和width。

例如：<img src="image.jpg" style="width: 50%; height: 50%"/>

來源

2013-12-12 09:26:38

它不工作。通過這種方式，我可以控制我用於鏈接的圖像大小。但是當我點擊圖片時，一個新的圖像會說

我想控制002.jpg。這將打開後，我點擊古爾岡.jpg –

當你點擊圖像它顯示的實際圖像和渲染是由瀏覽器管理。如果你想顯示較小的圖像，那麼你可以在服務器端重新調整圖像大小。 –

如何控制圖像的大小？

回答

相關問題