पृष्ठभूमि के आकार: कवर के बराबर

Question

अगर background-size:cover; के व्यवहार की "नकल" करने का कोई तरीका है (देखें http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover) <img> एक {{के अंदर के साथ X2 }} । मैं इस तरह की संरचना करना चाहता हूं:

<div style="width:100%, height=30%">
    <img ng-src="{{data.imageData}}"/>
</div>

क्षमा करें, यदि मैं विषय के बारे में बहुत स्पष्ट नहीं हूं, तो मुझे नहीं पता, इसे और अधिक स्पष्ट रूप से कैसे रखा जाए।

html css

0

Maroš Šeleng 24 नवम्बर 2015, 15:14

Answer 1

यहाँ एक समाधान है, लेकिन @Moob के समान।

div{
   width: 100%;
   height: 200px;
   position: relative;
   overflow: hidden;
}
img {
   display: block;
   width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
}

वर्किंग jsfiddle

0

Antony SUTHAKAR J 24 नवम्बर 2015, 12:59

Answer 2

समाधान

आप इसे object-fit और object-position संपत्ति के साथ पूरा कर सकते हैं

इसे क्रमशः cover और top left पर सेट करें

img {
  display: block;
  width:inherit;
  height: inherit;
  object-fit: cover;
  object-position: top left;
}

ये कार्य कैसे हैं

इन CSS3 गुणों को css-tricks.com में निम्न प्रकार से समझाया गया है

ऑब्जेक्ट-फिट संपत्ति यह परिभाषित करती है कि कोई तत्व अपने सामग्री बॉक्स की ऊंचाई और चौड़ाई पर कैसे प्रतिक्रिया करता है। यह ऑब्जेक्ट-पोजीशन प्रॉपर्टी के साथ संयोजन में छवियों, वीडियो और अन्य एम्बेड करने योग्य मीडिया प्रारूपों के लिए अभिप्रेत है। स्वयं द्वारा उपयोग किया गया, ऑब्जेक्ट-फिट हमें अपने बॉक्स के अंदर कैसे स्क्वैश और स्ट्रेच करता है, इस पर हमें ठीक-ठीक नियंत्रण देकर इनलाइन छवि तैयार करने देता है।

विस्तृत उपयोग के लिए, link1 और link2

1

Aravind Bharathy 24 नवम्बर 2015, 12:40

Answer 3

आप इस तरह से कुछ का उपयोग कर सकते हैं:

$(window).load(function() {    

	var theWindow        = $(window),
	    $bg              = $("#bg"),
	    aspectRatio      = $bg.width() / $bg.height();
	    			    		
	function resizeBg() {
		
		if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
		    $bg
		    	.removeClass()
		    	.addClass('bgheight');
		} else {
		    $bg
		    	.removeClass()
		    	.addClass('bgwidth');
		}
					
	}
	                   			
	theWindow.resize(resizeBg).trigger("resize");

});

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<img src="http://dummyimage.com/600x400/000/fff" id="bg" alt="">

एक और विकल्प देखें:

https://css-tricks.com/perfect-full-page-background-image/

0

Marcos Pérez Gude 24 नवम्बर 2015, 12:25

Answer 4

आप div के भीतर छवि को बिल्कुल स्थिति में ला सकते हैं। {{एक्स 1}} और {{एक्स 2}} का उपयोग करके इसे कम से कम अपने कंटेनर जितना बड़ा बनाएं। इसे नकारात्मक स्थिति दें और margin:auto का उपयोग करके इसे लंबवत और क्षैतिज रूप से केंद्रित करें। ओवरफ़्लो को छिपाने के लिए div पर overflow:hidden का उपयोग करें:

html, body {
    height:100%; min-height:100%;
}
div {
    border:1px solid black;
    width:100%;
    height:30%;
    overflow:hidden;
    position:relative;
}
div img {
    display:block;
    position:absolute;
    margin:auto;
    top:-100%;
    right:-100%;
    bottom:-100%;
    left:-100%;
    min-width:100%;
    min-height:100%;
}

<div>
    <img src="http://lorempixel.com/400/400/" />
</div>

इस jsFiddle को देखना आसान हो सकता है क्योंकि आप इसे देखने के लिए पैनलों का आकार बदल सकते हैं। http://jsfiddle.net/jb40mLq3/

0

Moob 24 नवम्बर 2015, 12:36

पृष्ठभूमि के आकार: कवर के बराबर

4 जवाब

संबंधित सवाल

नए सवाल