डिव में सेंटर ओवरसीज इमेज

Question

मैं केवल एक सीएसएस का उपयोग करके एक div के भीतर एक बड़े आकार की छवि को कैसे केंद्रित करना चाहता हूं।

हम एक द्रव लेआउट का उपयोग कर रहे हैं, इसलिए छवि कंटेनरों की चौड़ाई भिन्न होती है क्योंकि पृष्ठ की चौड़ाई (div की ऊंचाई निर्धारित है)। छवि एक डिव के भीतर बैठती है, एक इनसेट बॉक्सशेडो को रोकती है ताकि आप चित्र में पृष्ठ के माध्यम से देख सकें।

छवि को अपने व्यापक संभव मूल्य (डिजाइन का एक max-widthमूल्य है) पर आसपास के div को भरने के लिए आकार दिया गया है ।

यह करना बहुत आसान है अगर छवि आसपास के div से छोटी है:

margin-left: auto;
margin-right: auto;
display: block; 

लेकिन जब छवि div से बड़ी होती है तो यह केवल बाएं किनारे से शुरू होती है और दाईं ओर केंद्र से बाहर होती है (हम उपयोग कर रहे हैं overflow: hidden)।

हम एक असाइन कर सकते हैं width=100%, लेकिन ब्राउज़र छवियों को आकार देने और उच्च गुणवत्ता की कल्पना के आसपास वेब डिज़ाइन केंद्रों का एक घटिया काम करते हैं।

छवि को केंद्रित करने पर कोई विचार ताकि overflow:hiddenदोनों किनारों को समान रूप से काट दिया जाए ?

Comments

क्या आपने कभी इस समस्या का समाधान किया @Tom? मैं इस समय उसी मुद्दे पर चल रहा हूं। :)

— ctrlplusb

मैं मानता हूं कि आपकी छवि की चौड़ाई अलग-अलग है।

— अन्यदेवी

Answer 1

कुछ इस तरह की कोशिश करो। यह मध्य में किसी भी विशाल तत्व को लंबवत और क्षैतिज रूप से अपने माता-पिता के संबंध में उनके दोनों आकारों से कोई फर्क नहीं पड़ता है।

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

Comments

अद्भुत: यह किसी भी तत्व के साथ काम करता है। html 5 वीडियो के साथ भी ... धन्यवाद!

— taseenb

जैसा कि मैं यह समझता हूं: यह काम करता है क्योंकि यह छवि से बड़ा (उम्मीद) तत्व बनाता है (2 * 9999px x 2 * 9999px) और उस तत्व के अंदर छवि को केंद्र बनाता है (मार्जिन: ऑटो)। तो जब तक छवि 2 * 9999px से अधिक न हो, तब तक काम करना चाहिए।

— माइकल क्रुप

-100%शीर्ष / दाएं / नीचे / बाएं के लिए उपयोग क्यों नहीं किया जाता है ? उस कंटेनर से शाब्दिक रूप से किसी भी चौड़ाई हो सकती है ।

— साइमन

हाँ, मैंने इस -100%मुद्दे को ^ ^ ^ भी अनुभव किया है । Btw: अगर आप को जोड़ने min-widthऔर min-heightकी 100%आप मूल रूप से एक मिल background-size: cover;छवि टैग के साथ व्यवहार -> jsfiddle

— साइमन

@HarrisonPowers खैर माता-पिता के पास निश्चित रूप से एक ऊंचाई है, चाहे वह तय हो या गतिशील हो। यह तब भी काम करेगा जब कुछ अन्य सामग्री div को भर रही है, जिससे इसकी ऊँचाई हो सकती है (उदाहरण के लिए पाठ)।

— hyounis

Answer 2

यह एक पुराना क्यू है, लेकिन फ्लेक्सबॉक्स या स्थिति के बिना एक आधुनिक समाधान इस तरह से काम करता है।

margin-left: 50%;
transform: translateX(-50%);

.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

तो यह काम क्यों करता है?
पहली नज़र में ऐसा लगता है कि हम 50% को दाईं ओर और फिर 50% को बाईं ओर फिर से स्थानांतरित करते हैं। इसके परिणामस्वरूप शून्य बदलाव होगा, तो क्या?
लेकिन 50% समान नहीं हैं, क्योंकि संदर्भ महत्वपूर्ण है। यदि आप सापेक्ष इकाइयों का उपयोग करते हैं, तो मार्जिन की गणना मूल तत्व की चौड़ाई के प्रतिशत के रूप में की जाएगी, जबकि परिवर्तन एक ही तत्व के सापेक्ष 50% होगा ।

सीएसएस जोड़ने से पहले हमारे पास यह स्थिति है

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       +-----------------------------------------------------------+
       | Element E                                                 |
       +-----------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

जोड़ा शैली के साथ margin-left: 50%हमारे पास है

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       |                     +-----------------------------------------------------------+
       |                     | Element E                                                 |
       |                     +-----------------------------------------------------------+
       |                     |                     |
       +---------------------|---------------------+
       |========= a ========>|

       a is 50% width of P

और transform: translateX(-50%)वापस बाईं ओर शिफ्ट हो जाता है

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

दुर्भाग्य से यह केवल क्षैतिज केंद्रित के लिए काम करता है क्योंकि मार्जिन प्रतिशत गणना हमेशा चौड़ाई के सापेक्ष होती है। यानी न केवल margin-leftऔर margin-right, लेकिन यह भी margin-topऔर margin-bottomचौड़ाई के संबंध में गणना कर रहे हैं।

ब्राउज़र संगतता में कोई समस्या नहीं होनी चाहिए: https://caniuse.com/#feat=transforms2d

Comments

यह ऊर्ध्वाधर संरेखण के लिए काम नहीं करता है (जब .inner की बड़ी ऊंचाई होती है। राउटर)

— cronfy

@ क्रॉन्फ़ि नं वर्टिकली यह काम नहीं करेगा, क्योंकि चौड़ाईmargin-top: 50% का 50% होगा । इच्छानुसार ऊँचाई नहीं।

— yunzen

अब तक का सबसे सुरुचिपूर्ण समाधान है

— सौहैब बेसब्स

थोड़ी देर के लिए एक समाधान के लिए खोज, सबसे अच्छा, सबसे सरल एक; चीयर्स

— lauWM

यह शुद्ध जादूगर जादू है। धन्यवाद! सफारी और क्रोम में पूरी तरह से काम करता है ( -webkit-transform: translateX(-50%);अच्छे उपाय के लिए एक अतिरिक्त के साथ )

— निक शेंबल

Answer 3

Div के अंदर एक बड़ा div लगाएं, उस div के अंदर और उस इमेज के बीच में सेंटर बनाएं।

यह इसे क्षैतिज रूप से केंद्रित करता है:

HTML:

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

सीएसएस:

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

डेमो: http://jsfiddle.net/Guffa/L9BnL/

इसे लंबवत रूप से भी केन्द्रित करने के लिए, आप इनर डिव के लिए भी इसका उपयोग कर सकते हैं, लेकिन आपको इसे बिल्कुल अंदर रखने के लिए छवि की ऊँचाई की आवश्यकता होगी।

Comments

यह "imageContainer" के भीतर केंद्रित छवि के बाएं किनारे के साथ समाप्त हुआ। जैसा कि मैंने ऊपर टिप्पणी की थी, हमारी छवि कंटेनर डिव द्रव की चौड़ाई और निश्चित ऊंचाई है।

— टॉम

@Tom: यदि मैं widthकन्टेनर पर सेटिंग हटाता हूं , तो यह पैरेंट की चौड़ाई होगी, और इमेज तब भी केंद्रित रहती है, जब पेज इमेज से संकरा हो, यानी बाएं किनारे जितना दाएं किनारे से छिपा हो : jsfiddle.net/Guffa/L9BnL/2

— गुफ़ा

प्रेरणा के लिए धन्यवाद। मैं स्थिति का उपयोग करता हूं: .imageCenter के लिए सापेक्ष। इस तरह मुझे स्थिति की आवश्यकता नहीं है: मूल कंटेनर के सापेक्ष।

— user3153298

इस प्रश्न के लिए बहुत सारी चालाकियां हैं और वे सभी अपनी कमियां निकाल चुके हैं। कुछ काम "बेहतर" हैं, लेकिन समझना आसान नहीं है। यह समाधान सही अर्थों में बनाता है, छवि को एक व्यापक div में सामान्य रूप से केंद्रित किया जा रहा है जिसे क्रॉप किया जा रहा है। यह गलत लगता है, लेकिन यह निश्चित रूप से वेब-भौतिकी के नियमों को तोड़े बिना काम करता है। मैंने इस विकल्प को कई अन्य बहुत मुश्किल से समझी जाने वाली ट्रिक्स पर चुना, भले ही यह थोड़ा गंदा लगता हो।

— रेडली सस्टेयर

Answer 4

खेल के लिए देर से, लेकिन मैंने पाया कि यह तरीका बेहद सहज है। https://codepen.io/adamchenwei/pen/BRNxJr

सीएसएस

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-items: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

एचटीएमएल

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>

Comments

अच्छा! इसे सरल भी किया जा सकता है। चाल display: flexमाता-पिता कंटेनर और align-self: centerछवि पर किया जाता है। यहाँ एक अनुकूलित संस्करण है: codepen.io/anon/pen/dWKyey

— caiosm1005

Answer 5

छवि टैग के लिए निश्चित या स्पष्ट चौड़ाई या ऊँचाई का उपयोग न करें। इसके बजाय, इसे कोड करें:

      max-width:100%;
      max-height:100%;

ex: http://jsfiddle.net/xwrvxser/1/

Comments

यह तब छवि के चारों ओर जगह छोड़ता है जो मुझे लगता है कि वे बचने की कोशिश कर रहे हैं।

— इयोन

Answer 6

मैं एक छवि को एक दिव्य / नोड की पृष्ठभूमि बनाने का बहुत बड़ा प्रशंसक हूं - फिर आप background-position: centerस्क्रीन आकार की परवाह किए बिना इसे विशेषता के लिए उपयोग कर सकते हैं

Comments

यह छवियों का उपयोग करने का एक सुलभ तरीका नहीं है। यह सजावटी छवियों के लिए ठीक काम कर सकता है, लेकिन किसी भी छवि को जो जानकारीपूर्ण है उसे पाठ की आवश्यकता है।

— user2532030

Answer 7

चौड़ाई और ऊंचाई केवल उदाहरण के लिए हैं:

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

यह आपके लिए काम करना है अगर आपके पैरेंट डिव के लेफ्ट और टॉप आपकी स्क्रीन के विंडो के बहुत ऊपर और लेफ्ट नहीं हैं। इससे मेरा काम बनता है।

Comments

एक फर्क करने के लिए प्रतीत नहीं किया। यह निश्चित नहीं है कि अगर इस तथ्य के कारण कुछ भी है कि चौड़ाई तरल है, जबकि ऊंचाई इस बात पर तय होती है कि माता-पिता क्या होंगे।

— टॉम

यह तकनीक काम करती है अगर छवि कंटेनर से छोटी है।

— अन्यदेवी

Answer 8

मैंने पाया कि यह बिना फ्लेक्स के एक और अधिक सुंदर समाधान है:

.wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}

Answer 9

@ Yunzen के शानदार जवाब पर बिल्डिंग:

मैं अनुमान लगा रहा हूं कि इस विषय को खोजने वाले कई लोग एक बड़ी छवि का उपयोग "हीरो" पृष्ठभूमि छवि के रूप में कर रहे हैं, उदाहरण के लिए एक मुखपृष्ठ पर। इस मामले में, वे अक्सर चाहते हैं कि पाठ छवि पर दिखाई दे और इसे मोबाइल उपकरणों पर अच्छी तरह से मापें।

यहाँ ऐसी पृष्ठभूमि छवि के लिए सही CSS है ( <img>टैग पर इसका उपयोग करें ):

/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;

/* Move to the left by 50% of own width */
transform: translateX(-50%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;

Answer 10

एक विकल्प object-fit: coverजिसका आप उपयोग कर सकते हैं वह है थोड़ा सा व्यवहार करना background-size: cover। ऑब्जेक्ट-फिट पर अधिक ।

नीचे दिए गए सभी JS को अनदेखा करें, यह सिर्फ डेमो के लिए है।

यहां कुंजी यह है कि आपको एक आवरण के अंदर छवि को सेट करने और इसे निम्नलिखित गुण देने की आवश्यकता है।

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

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

केवल नकारात्मक पक्ष object-fitयह है कि यह IE11 पर काम नहीं करता है ।

// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');


const resizeWrapper = () => {
  wrapper.style.width = widthInput.value + "px";
  wrapper.style.height = heightInput.value + "px";
}

button.addEventListener("click", resizeWrapper);

.wrapper {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 2em;
  border: 1px solid red;
}

.wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.imgur.com/DrzMS8i.png">
</div>


<!-- demo only -->
<lable for="width">
  Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
  height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>