1. घर
  2. सवाल और जवाब
  3. केंद्रित आइटम

केंद्रित आइटम

2015-09-11 6 views
8

समस्या का सारांश

मेरे इच्छित लेआउट है पृष्ठ पर केंद्र के लिए (दोनों अनुलंब और क्षैतिज) अज्ञात आकार की एक छवि सक्षम होने के लिए। अगर छवि किसी भी दिशा में फिट होने के लिए बहुत बड़ी है, तो मैं स्क्रॉल बार दिखाना चाहता हूं ताकि उपयोगकर्ता पूरी छवि देखने के लिए स्क्रॉल कर सके। जिस मुद्दे में मैंने भाग लिया है वह यह है कि जब छवि फिट करने के लिए बहुत बड़ी होती है, तो छवि के शीर्ष और बाएं (किस हिस्से को काट दिया जाता है) पर स्क्रॉल करने में सक्षम नहीं होगा।केंद्रित आइटम

का प्रयास किया गया समाधान

मैं इच्छित लेआउट को प्राप्त करने के flexbox उपयोग करने का प्रयास कर रहा हूँ, लेकिन flexbox एक आवश्यकता नहीं है।

.body { 
 
    height: 600px; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid red; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
img { 
 
    border: 5px solid black; 
 
}
<div class="body"> 
 
    <div class="container"> 
 
    <img src="http://placehold.it/700x700" /> 
 
    </div> 
 
</div>
: यहाँ एक छोटा सा उदाहरण है कि समस्या ([?, भी या शायद फ़ायरफ़ॉक्स] ध्यान दें कि मैं नहीं किसी भी ब्राउज़र उपसर्गों सीएसएस में डाल दिया है, तो आप Chrome में इस को देखना चाहते जाएगा) पुनरुत्पादित करता है

आपको छवि के चारों ओर सीमा पूरी तरह से देखने में सक्षम होना चाहिए, लेकिन छवि के बाएं और/या शीर्ष भाग को खिड़की के रूप में काट दिया जाएगा। खिड़की कम हो रही है क्योंकि छवि की अधिक से अधिक छवियां अनुपलब्ध हो जाएंगी।

ध्यान दें कि इसमें कोई छवि नहीं है, तो इससे कोई फर्क नहीं पड़ता। यहाँ एक टुकड़ा सादे पुराने divs का उपयोग कर समस्या को दिखाने के लिए है:

.body { 
 
    height: 600px; 
 
    margin-top: 80px; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border: 1px solid red; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
.content { 
 
    border: 5px solid black; 
 
    width: 600px; 
 
    height: 600px; 
 
    background-color: gray; 
 
}
<div class="body"> 
 
    <div class="container"> 
 
    <div class="content"></div> 
 
    </div> 
 
</div>

फिर पूरे div हमेशा स्क्रॉल करके पहुंच योग्य होना चाहिए, लेकिन यह नहीं है।

प्रश्न

मैं ऊपर वर्णित केवल HTML और सीएसएस (जे एस स्वीकार नहीं उत्तर) का उपयोग कर वांछित लेआउट कैसे प्राप्त कर सकते हैं? समस्या को हल करने के लिए फ्लेक्सबॉक्स की आवश्यकता नहीं है, लेकिन यह एक अच्छा होगा।

धन्यवाद!

स्रोत

2015-09-11 Chandler Kent

+0

आप एक छवि है कि व्यूपोर्ट, शीर्ष से बड़ा है और छोड़ दिया हमेशा कटऑफ हो जाएगा केंद्रित कर रहे हैं। आप व्यूपोर्ट के ऊपरी या बाएं तरफ स्क्रॉल नहीं कर सकते हैं। आपको उन आकारों पर छवि को संभालने के तरीके को बदलने की ज़रूरत है ताकि इसे रोकने से रोकने के लिए, संभवतः मीडिया प्रश्नों के माध्यम से जो छवि को केन्द्रित या सादे पुराने रूप से व्यूपोर्ट फिट करने के लिए छवि को कम करने से रोकती हैं। यदि इसे हर समय केंद्रित किया जाना है, तो आपको व्यूपोर्ट को कम करने के रूप में केंद्र को स्क्रॉल करने के लिए छवि को केंद्रित नहीं करना होगा और जेएस का उपयोग करना होगा। – brouxhaha

+0

क्या आप स्पष्टीकरण दे सकते हैं कि आपका मतलब क्या है @brouxhaha? यदि छवि व्यूपोर्ट के लिए बहुत बड़ी है और कंटेनर तत्व में स्क्रॉल सेट है, तो मैं कंटेनर में सभी सामग्री को स्क्रॉल करने में सक्षम होने की उम्मीद करता हूं। –

+0

जैसा कि आप 'न्यूनतम सामग्री', 'अधिकतम-सामग्री', और 'फिट-सामग्री' जैसे आंतरिक माप के साथ कर सकते हैं। लेकिन वे अक्सर अच्छी तरह से ज्ञात या उपयोग नहीं कर रहे हैं ... मुझे नहीं पता कि क्यों।मुझे यकीन है कि अन्य विधियां हैं लेकिन वे मुझे elude। – zer00ne

उत्तर

0

तो मानदंड यह है कि आप हमेशा एक केंद्रित छवि को लंबवत और क्षैतिज रूप से चाहते हैं, और यह स्क्रॉल करने योग्य है चाहे कितना छोटा या बड़ा व्यूपोर्ट है? इस स्निपेट पर नज़र डालें और अगर मैं नज़दीकी हूं तो मुझे बताएं। अगर मैं पूरी तरह गलत हूं तो मेरे पास योजना बी है। अगर मैं सफल रहा हूं या लगभग वहां हूं, तो मैं समझाऊंगा कि मैंने क्या किया।

सारांश

  1. <body> परिभाषित करें, क्योंकि यदि आप तो आप यह तय नहीं कर सकते हैं नहीं है कितनी दूर अपने स्क्रॉलबार जा सकते हैं।

    ♦ position: relative, top, bottom, right, और left 0 पर <body> फैला व्यूपोर्ट कवर करने के लिए।

    ♦ width और शरीर के height<body>

    ♦ पर एक सीमा लागू करने के बाद से <body>100vw और 100vh हैं एक कंटेनर सभी flexbox गुण क्षैतिज केंद्रित के लिए .x को प्रभावित करती है है।

    ♦ चूंकि आपने स्क्रॉलबार के उपयोग पर जोर दिया है, इसलिए overflow: scroll स्क्रॉल बार आवश्यक होने पर भी जारी रहेगा। गतिशील सामग्री से जुड़े परिस्थितियों में कौन सा अच्छा है क्योंकि कोई भी कूद नहीं होगा।

  2. बाहरी कंटेनर .xflexbox गुण है आंतरिक कंटेनर .y केंद्रित करने के लिए। इसके अतिरिक्त आप एक बहुत ही कम ज्ञात संपत्ति देखेंगे।

  3. .y छवि के केंद्र में flex-flow: column nowrap है।

  4. bodymin-contentheight और width दोनों जो इसे एक तंग पैकेज में सामग्री की सीमाओं है बाध्य करेगा के लिए आवेदन किया है। इस प्रकार आप सामान्य कटऑफ के बिना छवि की सीमाओं को देखने में सक्षम हैं।

अद्यतन

इस डेमो प्रदर्शित करने के लिए कुछ सरल जे एस है कि किसी भी आकार के चित्र हैं:

  1. क्षैतिज रूप से मध्यसंरेखित
  2. खड़ी केंद्रित
  3. सभी पक्षों देखी जा सकती है किसी भी आकार में।

नोट: कुछ भी के तहत डेमो पूरी तरह से हटा सकते हैं या बाहर टिप्पणी करने के लिए सुरक्षित है।

// DEMO 
 
var s = document.getElementById('s'); 
 
s.addEventListener('click', function(event) { 
 
    event.preventDefault(); 
 
    var w = document.getElementById('w'), 
 
    h = document.getElementById('h'), 
 
    pic = document.getElementById('pic'), 
 
    wv = w.value, 
 
    hv = h.value; 
 
    pic.src = "http://placehold.it/" + wv + "x" + hv + "/"; 
 
}, false);
/* RESET */ 
 

 
html { 
 
    box-sizing: border-box; 
 
    font: small-caps 400 16px/1.45'Source Code Pro'; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0 solid transparent; 
 
} 
 
/* REQUIRED */ 
 

 
body { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    overflow: auto; 
 
    margin: auto; 
 
    width: -moz-min-content; 
 
    width: -webkit-min-content; 
 
    width: min-content; 
 
    height: -moz-min-content; 
 
    height: -webkit-min-content; 
 
    height: min-content; 
 
} 
 
.x { 
 
    height: 600px; 
 
    flex-flow: row nowrap; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    align-content: center; 
 
} 
 
.y { 
 
    margin: auto; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    align-items: center; 
 
    justify-content: center; 
 
    align-content: center; 
 
    border: 2px dashed red; 
 
} 
 
/* DEMO */ 
 

 
.ui { 
 
    position: fixed; 
 
    top: 1em; 
 
    left: 1em; 
 
    width: 500px; 
 
    line-height: 1.3; 
 
    z-index: 1; 
 
} 
 
fieldset { 
 
    border: 1px solid lightgrey; 
 
    border-radius: 6px; 
 
} 
 
input { 
 
    width: 48px; 
 
    line-height: 1.2; 
 
    border: 1px solid grey; 
 
    border-radius: 6px; 
 
    padding: 2px; 
 
    margin: 2px 1px; 
 
} 
 
label { 
 
    margin: 2px 0 2px 2px; 
 
}
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>C.R.A.P.D. -=- Changing Rectangle Alignment, Position, and Dimensions</title> 
 
</head> 
 

 
<body> 
 
    <!-- DEMO --> 
 
    <header class="ui"> 
 
    <fieldset> 
 
     <legend>Changing Rectangle Alignment Position and Dimensions</legend> 
 
     <label for="w">Width 
 
     <input id="w" type="text" value="300" /> 
 
     </label> 
 
     <label for="h">Height 
 
     <input id="h" type="text" value="300" /> 
 
     </label> 
 
     <input id="s" type="submit" value="Submit" /> 
 
    </fieldset> 
 
    </header> 
 
    <!-- REQUIRED --> 
 
    <main class="x"> 
 
    <section class="y"> 
 
     <img id="pic" src="http://placehold.it/300x300/" /> 
 
    </section> 
 
    </main> 
 
</body> 
 

 
</html>

स्रोत

2015-09-11 18:05:57 zer00ne

+0

धन्यवाद @ zer00ne। यह समाधान लंबवत केंद्रित नहीं प्रतीत होता है। –

+0

इसे पूरा पेज देखें। ऊपर और नीचे पूर्ण व्यूपोर्ट पर हैं, जो संक्षेप में केंद्रित है। – zer00ne

+0

मेरा बुरा। तुम सही हो, महोदय! मैंने बस अपने फोन पोर्ट्रेट उन्मुख पर स्निपेट को देखा और वास्तव में यह लंबवत केंद्रित नहीं था। मैंने इसे सुधार लिया है, कृपया अद्यतन स्निपेट देखें। – zer00ne

0

मामले में आप अभी भी देख रहे हैं, या किसी और एक सरल समाधान में रुचि के लिए:

आप इस एक फ्लेक्स कंटेनर के भीतर एक कंटेनर में अपनी छवि लपेटकर द्वारा प्राप्त कर सकते हैं , के रूप में इस प्रकार है:

  • फ्लेक्स कंटेनर 0,123,
    • display: flex
    • height: 100vh
  • इनर कंटेनर
    • margin: auto

यह सब आप अज्ञात आकार की एक छवि प्राप्त करने की आवश्यकता है व्यूपोर्ट में दोनों लंबवत और क्षैतिज रूप से केंद्रित है, इसके किसी भी हिस्से में स्क्रॉल करने की क्षमता खोने के बिना, यदि यह किसी भी दिशा में फिट नहीं होता है।

उदाहरण 1: (छवि व्यूपोर्ट में केंद्रित)

body { 
 
    margin: 0; /* Override user agent styles */ 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 
.container { 
 
    margin: auto; 
 
}
<body class="flex"> 
 
    <main class="container"> 
 
    <img src="http://placehold.it/100x100"> 
 
    </main> 
 
</body>

उदाहरण 2: (छवि व्यूपोर्ट में फिट नहीं करता है, फिर भी अभी भी स्क्रॉल किया जा सकता है)

body { 
 
    margin: 0; /* Override user agent styles */ 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 
.container { 
 
    margin: auto; 
 
} 
 
img { 
 
    border: 1px solid red; 
 
}
<body class="flex"> 
 
    <main class="container"> 
 
    <img src="http://placehold.it/1000x1000"> 
 
    </main> 
 
</body>

यह क्रोम, फ़ायरफ़ॉक्स, ओपेरा और एज के नवीनतम संस्करण में काम करता है।

स्रोत

2017-02-14 20:40:12

0

बस अपने .container से justify-content हटाएं और अपनी छवि में margin: auto जोड़ें।

.body { 
 
    height: 600px; 
 
} 
 

 
.container { 
 
    margin: auto; 
 
    display: flex; 
 
    /* align-items: center; // no need for this anymore */ 
 
    /* justify-content: center; // remove this */ 
 
    border: 1px solid red; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 

 
img { 
 
    border: 5px solid black; 
 
    margin: auto; /* add this */ 
 
}
<div class="body"> 
 
    <div class="container"> 
 
    <img src="http://placehold.it/700x700" /> 
 
    </div> 
 
</div>

स्रोत

2018-02-22 17:43:51 Dennis

संबंधित मुद्दे
नवीनतम प्रश्न

 संबंधित मुद्दे