TLDR;
एक छवि जोड़ने और केंद्रित करने के लिए इस HTML / CSS का उपयोग करें और अपनी मार्कडाउन फ़ाइल के अंदर स्क्रीन स्पेस चौड़ाई का 60% हिस्सा सेट करें, जो आमतौर पर एक अच्छा शुरुआती मूल्य है:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
बदलाव widthसीएसएस मान को आप जो भी प्रतिशत चाहते हैं उसे , या मार्कडाउन डिफ़ॉल्ट आकार का उपयोग करने के लिए इसे पूरी तरह से हटा दें, जो मुझे लगता है कि स्क्रीन की चौड़ाई 100% है यदि छवि स्क्रीन से बड़ी है, या यह अन्यथा वास्तविक छवि चौड़ाई है।
किया हुआ!
या, बहुत अधिक जानकारी के लिए पढ़ते रहें।
यहां विभिन्न HTML और CSS विकल्प दिए गए हैं जो पूरी तरह से मार्कडाउन फाइलों के अंदर काम करते हैं:
1. केंद्र और कॉन्फ़िगर (आकार) अपनी मार्कडाउन फ़ाइल में सभी चित्र:
बस अपनी मार्कडाउन फ़ाइल के शीर्ष पर इसे कॉपी और पेस्ट करें और फ़ाइल में सभी छवियों का आकार बदलें (फिर सामान्य मार्काट सिंटैक्स के साथ अपनी इच्छित कोई भी छवि डालें):
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
या, यहां ऊपर जैसा ही कोड है लेकिन विस्तृत HTML और CSS टिप्पणियों के साथ यह बताने के लिए कि क्या चल रहा है:
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
अब, क्या आप मार्कडाउन का उपयोग करके एक छवि सम्मिलित करते हैं:
या HTML आपकी मार्कडाउन फ़ाइल में:
<img src="https://i.stack.imgur.com/RJj4x.png">
... यह स्वचालित रूप से केंद्रित होगा और स्क्रीनव्यू चौड़ाई के 60% के आकार का होगा, जैसा कि ऊपर दिए गए HTML और CSS में टिप्पणियों में वर्णित है। (बेशक 60% आकार वास्तव में आसानी से परिवर्तनशील है, और मैं नीचे दिए गए सरल तरीके इसे एक छवि-दर-छवि आधार पर भी प्रस्तुत करता हूं)।
2. केंद्र और स्थिति के आधार पर छवियों को कॉन्फ़िगर करें, एक समय में एक:
आपने <style>अपनी मार्कडाउन फ़ाइल के शीर्ष में उपरोक्त ब्लॉक को कॉपी और पेस्ट किया है या नहीं , यह भी काम करेगा, क्योंकि यह आपके द्वारा ऊपर सेट की गई किसी भी फ़ाइल-स्कोप शैली की सेटिंग्स पर ओवरराइड करता है और पूर्वता लेता है:
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
आप इसे इस तरह से कई लाइनों पर प्रारूपित कर सकते हैं, और यह अभी भी काम करेगा:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
3. उपरोक्त सभी के अलावा, आप अलग-अलग छवियों को स्टाइल करने में मदद करने के लिए CSS स्टाइल क्लासेस भी बना सकते हैं :
इस पूरी चीज़ को अपनी मार्कडाउन फ़ाइल के शीर्ष पर जोड़ें।
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
अब, आपके imgसीएसएस ब्लॉक ने छवियों को केंद्रित करने के लिए डिफ़ॉल्ट सेटिंग निर्धारित की है और आकार में स्क्रीन स्पेस की चौड़ाई का 60% है, लेकिन आप उन सेटिंग्स को छवि-दर-छवि आधार पर ओवरराइड करने के लिए leftAlignऔर rightAlignसीएसएस कक्षाओं का उपयोग कर सकते हैं ।
उदाहरण के लिए, यह छवि केंद्र-संरेखित होगी और आकार में 60% (डिफ़ॉल्ट मैं ऊपर सेट):
<img src="https://i.stack.imgur.com/RJj4x.png">
यह छवि बाएं-संरेखित की जाएगी , हालाँकि, पाठ को इसके दाईं ओर लपेटने के साथ, leftAlignसीएसएस वर्ग का उपयोग करके हमने अभी ऊपर बनाया है!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
यह इस तरह लग सकता है:
आप इसके किसी भी सीएसएस गुण को styleविशेषता के माध्यम से अभी भी ओवरराइड कर सकते हैं , हालांकि, जैसे चौड़ाई, इस तरह से:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
और अब आपको यह मिलेगा:
4. 3 सीएसएस कक्षाएं बनाएं, लेकिन imgमार्कडाउन डिफॉल्ट को न बदलें
एक और विकल्प जो हमने अभी ऊपर दिखाया था, जहां हमने डिफ़ॉल्ट img property:valueसेटिंग्स को संशोधित किया और 2 कक्षाएं बनाईं, केवल सभी डिफ़ॉल्ट मार्कडाउन imgगुणों को छोड़ना है , लेकिन इस तरह 3 कस्टम सीएसएस कक्षाएं बनाएं:
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
इस तरह, उन्हें उपयोग करें:
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
ध्यान दें कि मैंने widthसीएसएस styleविशेषता का उपयोग करके संपत्ति को मैन्युअल रूप से कैसे सेट किया है, लेकिन अगर मेरे पास कुछ और जटिल था जो मैं करना चाहता था, तो मैं इस तरह से कुछ अतिरिक्त कक्षाएं भी बना सकता हूं, उन्हें <style>...</style>ऊपर ब्लॉक के अंदर जोड़कर :
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
अब आप एक ही ऑब्जेक्ट पर कई क्लासेस असाइन कर सकते हैं, जैसे। बस एक स्थान से अलग वर्ग के नाम, एक अल्पविराम नहीं । परस्पर विरोधी सेटिंग की स्थिति में, मेरा मानना है कि जो भी अंतिम होगा वह वही होगा जो प्रभावी होगा, जो किसी भी पूर्व-निर्धारित सेटिंग को ओवरराइड करता है। यह उसी स्थिति में होना चाहिए जब आप समान सीएसएस गुण एक ही सीएसएस वर्ग में या एक ही एचटीएमएल styleविशेषता के अंदर कई बार सेट करते हैं ।
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. सीएसएस कक्षाओं में सामान्य सेटिंग्स को समेकित करें:
आखिरी चाल वह है जो मैंने इस उत्तर में यहां सीखी है: मैं विभिन्न छवियों को अलग-अलग ढंग से स्टाइल करने के लिए सीएसएस का उपयोग कैसे कर सकता हूं? । जैसा कि आप ऊपर देख सकते हैं, सीएसएस alignकक्षाओं के सभी 3 ने छवि की चौड़ाई 60% निर्धारित की है। इसलिए, यह सामान्य सेटिंग इस तरह से एक साथ सभी पर सेट की जा सकती है यदि आप चाहें, तो आप प्रत्येक वर्ग के लिए विशिष्ट सेटिंग्स बाद में सेट कर सकते हैं:
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
अधिक जानकारी:
1. मार्कडाउन में HTML और CSS पर मेरे विचार
जहां तक मेरा सवाल है, जो कुछ भी मार्कडाउन डॉक्यूमेंट में लिखा जा सकता है और मनचाहा रिजल्ट मिल सकता है वह सब हमारे बाद का है, कुछ "प्योर मार्कडाउन" सिंटेक्स का नहीं।
सी और सी ++ में, कंपाइलर असेंबली कोड के लिए संकलित करता है, और फिर असेंबली को बाइनरी में इकट्ठा किया जाता है। कभी-कभी, हालांकि, आपको निम्न-स्तरीय नियंत्रण की आवश्यकता होती है जो केवल असेंबली प्रदान कर सकती है, और इसलिए आप C या C ++ स्रोत फ़ाइल के अंदर इनलाइन असेंबली लिख सकते हैं। असेंबली "निचले स्तर" की भाषा है और इसे C और C ++ के ठीक अंदर लिखा जा सकता है।
तो यह मार्कडाउन के साथ है। मार्काडाउन उच्च स्तरीय भाषा है जिसे HTML और CSS की व्याख्या की जाती है। हालाँकि, जहाँ हमें अतिरिक्त नियंत्रण की आवश्यकता होती है, हम अपनी मार्कडाउन फ़ाइल के ठीक नीचे निचले स्तर के HTML और CSS को "इनलाइन" कर सकते हैं, और फिर भी इसकी सही व्याख्या की जाएगी। एक अर्थ में, इसलिए, HTML और CSS हैं वैध "markdown" वाक्य रचना।
इसलिए, एक छवि को मार्कडाउन में केंद्रित करने के लिए, HTML और CSS का उपयोग करें।
2. मार्कडाउन में मानक छवि प्रविष्टि:
डिफ़ॉल्ट "पीछे के दृश्यों" HTML और CSS प्रारूपण के साथ मार्कडाउन में एक मूल छवि कैसे जोड़ें:
यह मार्कडाउन:
इस उत्पादन का उत्पादन करेंगे:
यह मेरा फायर-शूटिंग हेक्साकॉप्टर है जिसे मैंने बनाया है ।
आप वैकल्पिक रूप से उद्घाटन वर्ग कोष्ठक में एक विवरण जोड़ सकते हैं। ईमानदारी से, मुझे यह भी पता नहीं है कि यह क्या करता है, लेकिन शायद यह एक HTML <img>तत्व altविशेषता में परिवर्तित हो जाता है , जो छवि लोड नहीं होने की स्थिति में प्रदर्शित होता है, और अंधे के लिए स्क्रीन पाठकों द्वारा पढ़ा जा सकता है। तो, यह मार्कडाउन:
भी इस उत्पादन का उत्पादन होगा:
3. HTML / CSS में क्या हो रहा है, इसके बारे में अधिक जानकारी जब मार्किंग में एक छवि को केंद्रित और आकार दिया जाता है:
छवि को मार्कडाउन में केंद्रित करने के लिए आवश्यक है कि हम अतिरिक्त नियंत्रण का उपयोग करें जो HTML और CSS हमें सीधे दे सकते हैं। आप एक व्यक्तिगत छवि को इस तरह सम्मिलित और केन्द्रित कर सकते हैं:
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
यहाँ अधिक जानकारी है। यहाँ क्या हो रहा है:
<imgइसके बाद के संस्करण कोड का हिस्सा एचटीएमएल "है टैग शुरू ", जबकि >अंत में एचटीएमएल "है अंत टैग "।- प्रारंभ टैग से अंत टैग तक, समावेशी, सब कुछ इस HTML
img" तत्व " को बनाता है ।
- HTML
img "टैग" / "एलिमेंट्स" का उपयोग HTML में इमेज डालने के लिए किया जाता है।
- तत्व के अंदर प्रत्येक असाइनमेंट HTML " विशेषता " को कॉन्फ़िगर कर रहा है ।
- "शैली" विशेषता को स्वीकार करता है सीएसएस स्टाइल , तो दोहरे उद्धरण चिह्नों यहाँ के अंदर सब कुछ:
style=""एक सीएसएस है property:valueकुंजी-मान " घोषणा "।
- ध्यान दें कि प्रत्येक सीएसएस "संपत्ति: मूल्य घोषणा" को एक अर्धविराम (
;) से अलग किया जाता है , जबकि इस "तत्व" में प्रत्येक HTML "विशेषता" को एक स्थान (
- इसके बाद के संस्करण, कुंजी "विशेषताओं का" हमारे HTML और सीएसएस कोड में केंद्र के लिए छवि मिल रहे हैं बस
srcऔरstyle हैं।
-
altएक वैकल्पिक है।
- एचटीएमएल अंदर
styleविशेषता है, जो सीएसएस स्टाइल स्वीकार करता है, कुंजी घोषणाओं हैं सभी 4 कि मैं दिखाने: display:block, float:none, margin-left:auto, औरmargin-right:auto ।
- यदि कुछ भी पहले संपत्ति निर्धारित नहीं किया
float है , तो आप इस घोषणा को छोड़ सकते हैं, लेकिन यह सिर्फ मामले में वैसे भी एक अच्छा विचार है।
- यदि पहली बार HTML और CSS का उपयोग करके किसी चित्र को केंद्र में रखना सीखें: https://www.w3schools.com/howto/howto_css_image_center.asp ।
- सीएसएस सी-स्टाइल टिप्पणियों (
/* my comment */) का उपयोग करता है ।
संदर्भ:
- सीएसएस सिंटेक्स के बारे में और अधिक पढ़ें यहाँ: https://www.w3schools.com/css/css_syntax.asp
- "HTML Tags vs Elements" के बारे में यहाँ पढ़ें ।
- मैंने अपने GitHub markdown readme में अपने HTML और CSS स्टाइलिंग का बहुत अभ्यास किया था: https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
- मैंने बस w3schools.com पर क्लिक करके HTML और सीएसएस के बारे में जो कुछ भी मुझे पता है, उसके बारे में सीखा। यहाँ कुछ विशिष्ट पृष्ठ हैं:
- %%%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
- https://www.w3schools.com/css/css_float.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
- https://www.w3schools.com/css/css3_images.asp
- https://www.w3schools.com/tags/default.asp
- HTML और CSS टिप्पणियां: https://www.w3schools.com/css/css_comments.asp
- मेरा फायर-हेक्साकॉप्टर मैंने बनाया: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
