div

Question

में फिट करने के लिए किसी छवि का आकार बदलें I piecemaker-container div के आकार में फिट करने के लिए छवि का आकार कैसे बदल सकता हूं?

<div id="piecemaker-container"> 
    <div id="piecemaker"> 
     <img src="splash.jpg" alt="some_text"/> 
    </div> 
    </div> 

#piecemaker-container { 
    display:block; 
    height:460px; 
    overflow:hidden; 
    margin: -10px auto 40px; 
    width: 960px; 
    max-width:100%; 
    max-height:100%; 
} 

कुछ की तरह -

#piecemaker { 
    display:block; 
    height:460px; 
    overflow:hidden; 
    margin: -10px auto 40px; 
    width: 960px; 
} 

Answer 1

#piecemaker-container div, #piecemaker-container img { 
width: 100%; 
height: 100%; 
} 

यह करना चाहिए।

Answer 2

आप img -tag की width और height गुण क्यों निर्धारित नहीं करते हैं?

<img src="splash.jpg" alt="some_text" width="960" height="460"/> 

Answer 3

img टैग के लिए एक सीएसएस वर्ग घोषित करने और इसे एक ही ऊंचाई और चौड़ाई div.Or सिर्फ 100% के रूप में यह घोषणा कर के रूप में के रूप में दिया

img { width: 100%; height: 100%; } 

Answer 4

यह एक ज़्यादा की तरह, लेकिन यदि आप लग सकता है देना नहीं चाहते कि छवि को निचोड़ा या बढ़ाया जाए, फिर भी आकार के अनुसार, आकार के अनुसार, इसे आकार में दोबारा आकार क्यों न दें? चूंकि PHP के साथ फिर से आकार में बहुत आसान है

उम्मीद है कि इससे मदद मिलती है?

Answer 5

$("#piecemaker-container").each(function(){ 
       var imageUrl = $(this).find('img').attr("src"); 
       $(this).find('img').css("visibility","hidden"); 
       $(this).css('background-image', 'url(' + imageUrl + ')').css("background-repeat","no-repeat").css("background-size","cover").css("background-position","50% 50%"); 
      });