कैरोसेल

Question

में छवि पहलू अनुपात बनाए रखें मैं एक कैरोसेल बनाने के लिए बूटस्ट्रैप का उपयोग कर रहा हूं, मेरे पास बड़ी छवियां हैं, जब स्क्रीन छवि से छोटी है, अनुपात नहीं रखा जाता है।

मैं इसे कैसे बदल सकता हूं?

यहाँ मेरी कोड है:

.carousel .item { 
    height: 500px; 
} 
.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
} 

http://jsfiddle.net/DRQkQ/

मैं छवि की जरूरत है 100% चौड़ाई फिट लेकिन (मुझे लगता है कि यह 500px है) 500px की अपनी ऊंचाई रखने के लिए यह है कि छोटे परदे पर मतलब यह होना चाहिए कि हम छवि के बहुत दूर और दूर दाएं को न देखें।

मैं एक div में चित्र वाली और

overflow: hidden; 
width: 100%; 
height: 500px; 
display: block; 
margin: 0 auto; 

जोड़ने की कोशिश की लेकिन यह काम नहीं करता

धन्यवाद!

Answer 1

यहां मुद्दा यह है देता है, बूटस्ट्रैप सीएसएस पर:

img { 
    max-width: 100%; 
    width: auto 9; 
    height: auto; 
    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
} 

सेट करने के बाद max-width: 100%; छवि व्यूपोर्ट के अलावा कोई बड़ा नहीं होगा। आप अपने सीएसएस पर कि व्यवहार को ओवरराइड करने की जरूरत है:

.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 500px; 
    max-width: none; 
} 

नोट max-width: none; तल पर गयी। यह डिफ़ॉल्ट अधिकतम-चौड़ाई मान है और सीमा को अनसेट करता है।

Here's आपका पहेली अपडेट किया गया।

Answer 2

कैरोसेल आइटम के अंदर img टैग हटाएं और पृष्ठभूमि जोड़ें। इस तरह आप CSS3 कवर संपत्ति का उपयोग कर सकते हैं।

.item1 { 
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 3

मैं जैसा कि नीचे दिखाया carousel.css लाइन से ऊंचाई लाइन बाहर टिप्पणी करके इस लक्ष्य को हासिल करने में सक्षम था:

.carousel-inner > .item > img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    /*height: 500px;*/ 
} 

Answer 4

इस कोड को अंत में मेरे लिए काम किया:

.carousel .item { 
    background:#F9F9F9; 
    border:1px solid #E0E0E0; 
    overflow:hidden; 
    margin-bottom:1em; 
    margin-top:1em; 
    padding:5px; 
} 
.carousel-inner > .item > img { 
    border: 1px solid #DDDDDD; 
    float: left; 
    margin: 0pt 3px; 
    padding: 2px; 
    height: none; 
    width: 100%; 
} 

.carousel-inner > .item > img:hover { 
    border: 1px solid #000000; 
} 

Answer 5

मुझे लगता है कि इसे CSS3 object-fit विशेषता के साथ संभालना बेहतर है।

यदि आपके पास निश्चित चौड़ाई और ऊंचाई के साथ छवि है और फिर भी यदि आप पहलू अनुपात को संरक्षित करना चाहते हैं, तो आप object-fit:contain; का उपयोग कर सकते हैं। यह अनुपात को ऊंचाई और चौड़ाई के साथ बनाए रखेगा।

उदाहरण के लिए:

img { 
     height: 100px; 
     width: 100px; 
     object-fit: contain; 
} 

आप यहाँ और अधिक जानकारी प्राप्त कर सकते हैं: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

आशा इस किसी के लिए उपयोगी होगा।

Answer 6

जाहिर है, उपर्युक्त समाधान मेरे लिए काम नहीं करते थे (मुझे नहीं पता क्यों?) लेकिन मुझे जावास्क्रिप्ट का उपयोग करके एक और कामकाज मिला।

असल में, यह एक और कठिन तरीका है लेकिन यह भी काम करता है। आप एक निश्चित पहलू अनुपात से विभाजित चौड़ाई तक कैरोसेल ऊंचाई सेट करने के लिए jQuery का उपयोग करते हैं।

var aspectRatio = 2.5; //Width to Height!!! 
    var imageWidth; 
    var imageHeight; 

    //bind the window resize event to the method - 
    //change in carousel width is only triggered when size of viewport changes 
    $(window).on("resize", methodToFixLayout); 

    //updates the carousel width when the window is resized 
    function methodToFixLayout(e){ 

     imageWidth = carousel.width(); 
     console.log(""); 
     console.log("Method width" + imageWidth); 
     console.log(""); 

     imageHeight = imageWidth/aspectRatio; 

     carouselContainer.height(imageHeight);  
     carousel.height(imageHeight); 
     carouselPic.height(imageHeight); 

     //solve the carousel glitch for small viewports - delete the carousel 
     windowWidth = $(window).width(); 
     if (windowWidth < 840){ 
      carousel.hide(); 
      $("#side-navbar").hide(); 
     } else { 
      carousel.show(); 
      $("#side-navbar").show(); 
     } 



    } 

यह ठीक मेरे लिए काम करने लगता है:

यहाँ मेरी कोड है।

आशा है कि यह आपके लिए भी काम करेगा।

आप या तो पहलू अनुपात स्वयं सेट कर सकते हैं, या किसी अन्य विधि का उपयोग कर सकते हैं। सबसे पहले, विंडो चौड़ाई और ऊंचाई को एक दृश्य आयाम पर सेट करें जहां चित्र अच्छी रूप से स्वरूपित दिखाई देता है। चौड़ाई और ऊंचाई पूछें, और अनुपात का काम करें। विंडो को मूल चौड़ाई और ऊंचाई पर वापस लौटें। उपयोगकर्ता बिल्कुल बदलाव नहीं देख पाएगा लेकिन आयाम रिकॉर्ड किए जाएंगे।

Answer 7

पहलू अनुपात बनाए रखने के लिए & हिंडोला div की पूर्ण कवरेज:

img { 
object-fit: cover; 
overflow: hidden; 
    } 

Answer 8

दूसरों का उल्लेख किया है के रूप में, css3 इस के लिए अच्छी तरह से काम करता है। मैंने कंटेनर के लिए पूर्ण चौड़ाई, निश्चित ऊंचाई का उपयोग किया, फिर 'कवर' के साथ छवि रखने वाले पहलू अनुपात को स्केल किया, फिर ओवरफ्लो को फेंक दिया:

.carousel .carousel-inner img { 
    width: 100%; 
    height: 30em; 
    object-fit: cover; 
    overflow: hidden; 
}