मैं बीस सेवेंथ में हेडर इमेज की ऊँचाई कैसे बदलूँ?

Question

मैं बीस सत्रह थीम में हेडर छवि (हेडर मीडिया अनुभाग में निर्दिष्ट) की ऊंचाई कैसे बदल सकता हूं?

विशेष रूप से मैं इसे होम पेज पर बदलना चाहता हूं क्योंकि यहां यह लगभग पूरे पेज को भरता है। मैं चाहता हूं कि यह बहुत छोटा हो। जिस तरह से यह अन्य पेजों पर दिखाई देता है जैसे कि बिल्ट-इन अबाउट पेज की अच्छी ऊंचाई है इसलिए अगर मैं यह कह सकूं कि होम पेज पर मैं संतुष्ट हो जाऊंगा। यद्यपि सटीक नियंत्रण करना जानना महान होगा।

Comments

निश्चित नहीं है कि theme-twenty-seventeenपिछले वर्षों के अनुरूप टैग होने पर कोई टैग क्यों नहीं है ।

— यूजर

यह एक अच्छा सवाल है, दुख की बात है कि अभी तक कोई स्पष्ट जवाब नहीं है। काश यह एक फिल्टर होता था erc ♀️♀️

— jerclarke

स्टैक ओवरफ्लो पर संबंधित प्रश्न

— मोनिका को फिर से बहाल करना -

Answer 1

मुझे css कोड का (भाग) मिला जो ऊंचाई को नियंत्रित करता है wp-content/themes/twentyseventeen/style.css।

कोड है जो तब लागू होता है जब एडमिन बार दिखाई नहीं देता है (विशिष्ट अनाम उपयोगकर्ता) वर्तमान में लाइन 3629 पर

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

जब व्यवस्थापक बार लागू होने और कोड है (उदाहरण के लिए आप लॉग इन हैं) वर्तमान में लाइन 3646 में दिखाई दे

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

और फिर कोड जो मोबाइल पर वर्तमान में 1638 लाइन पर लागू होता है:

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
        display: table;
        height: 300px;
        height: 75vh;
        width: 100%;
}

सीएसएस के इन तीनों खंडों को मेरे बच्चे की विषय शैली में कॉपी करके। मेरे द्वारा heightहोम पेज पर हेडर इमेज के लिए ऊँचाई को ट्विस्ट करने की विशेषता को संशोधित करते हुए । मैंने प्रत्येक अनुभाग में क्रमशः 30vh, से calc(30vh - 32px), और ऊंचाई निर्धारित की 30vh। मैंने पहले को height: 1200pxअकेला छोड़ दिया ।

ध्यान दें कि ऊँचाई तत्व सेट किया गया है, 100vhजो व्यूपोर्ट ऊँचाई के सापेक्ष ऊँचाई को आकार देता है। तो 100vh व्यूपोर्ट का 100% है जबकि 50vh व्यूपोर्ट का 50% है।

एक अजीब बात यह है कि होम पेज पर हैडर इमेज का ज़ूम और पोजिशन अन्य पेजों की तुलना में अलग है।

यकीन नहीं होता कि यह सबसे अच्छा तरीका है। मैं बेहतर विकल्पों के लिए खुला हूं, लेकिन अभी तक यह बुनियादी स्तर पर काम कर रहा है।

Comments

यह सीएसएस का एक अजीब गुच्छा प्रतीत होता है। मैंने इसकी कोशिश नहीं की है (लेकिन मुझे विश्वास है कि यह काम नहीं करेगा) अधिकतम ऊंचाई 500px और ऊंचाई 100vh है। यानी, 500px की अधिकतम ऊंचाई तक व्यू पोर्ट भरें।

— मदिवाड

क्या आपने @मीडिया पूछताछ को भी शामिल किया है? तीन अलग-अलग खंड हैं ताकि यह मोबाइल डिवाइस बनाम कंप्यूटर स्क्रीन पर अलग-अलग काम कर सके (तीसरा एडमिन बार के साथ कंप्यूटर स्क्रीन के लिए है)। मैं इसी सवाल के साथ संघर्ष कर रहा हूं, और स्रोत विषय मीडिया पूछताछ (यहां तक ​​कि महत्वपूर्ण) को ओवरराइड करने के लिए अपने बच्चे को विषय नहीं मिल सकता है।

— एरिक हैरिस

Answer 2

बस डैशबोर्ड से थीम को संपादित करें और थीम सीएसएस "कस्टम सीएसएस" में निम्नलिखित सीएसएस परिभाषा जोड़ें:

.has-header-image.home.blog .custom-header {
    height: 26vh;
}

Answer 3

एक टिप्पणी से मैंने @ उपयोगकर्ता के उत्तर में (वह एक शांत नाम है);) मैंने सोचा था कि मैं इसे दे दूँगा।

मैं थीम फ़ाइल को सीधे संपादित कर रहा हूं क्योंकि मैं एक फेंक-डॉक कंटेनर में काम कर रहा हूं, यह अवधारणा का अधिक प्रमाण है। इसे एक बच्चे के विषय में बदलने के लिए कुछ ट्विकिंग की आवश्यकता होगी।

में content/themes/twentyseventeen/style.css3680 ~ 3670ish बीच के क्षेत्र में जहां शीर्षक छवि झूठ है।

मूल कोड:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

लॉग आउट दृश्य को प्राप्त करने के लिए आकार (और क्रम) बदलना काफी अच्छा है:

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

मैं उन ठिकानों को कवर करने vhके %लिए छोड़ दिया है, जहां max-heightनहीं पहुंचा है, लेकिन फिर सेट करें max-heightकि आप क्या कर रहे हैं।

यह सब करने के लिए एक चेतावनी है:

यह पिक्सेल का बहुत ही शीर्ष भाग है। इसलिए जब तक आपके पास उस क्षेत्र में छवि का एक अच्छा हिस्सा नहीं है ... यह भद्दा लगता है (कई सिर कटा हुआ)

पालन ​​करने के लिए और अधिक (जब मैं इसे सुलझाता हूं)

Answer 4

छवि को क्रॉप करके आप इसे बदल सकते हैं। WordPress में, customizer के रूप में एक विकल्प है। आपको फ़सल की छवि के लिए निम्न चरणों का पालन करने की आवश्यकता है।

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.

Comments

हाँ ..... यह जवाब नहीं है। मैंने ऐसा किया है, और यह सिर्फ छवि के उस हिस्से में जूम करता है। यह एक बहुत ही संकीर्ण छवि बना रहा है, लेकिन स्क्रीन को फील करता है

— Madivad

Answer 5

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

फायरबग आपको अस्थायी रूप से सीएसएस को बदलने के लिए देता है ताकि आप इसे कैसे चाहें, फिर उस नए सीएसएस को थीम के सीएसएस पेज में कॉपी कर सकते हैं (यदि यह विकल्प है)।

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

Answer 6

मैंने पहली बार चाइल्ड थीम (WP द्वारा अनुशंसित कदम) की स्थापना की। फिर चाइल्ड थीम की style.css फ़ाइल में, मैंने नीचे सीएसएस जोड़ा। पहला खंड सामने पृष्ठ पर छवि की ऊंचाई को नियंत्रित करता है; दूसरा खंड सामने पृष्ठ पर छवि के लिए स्थान की ऊंचाई को नियंत्रित करता है। इसके लिए दोनों को काम करना होगा। मैंने कुछ पंक्तियों पर टिप्पणी की जो मेरी निश्चित ऊंचाई की छवि के साथ हस्तक्षेप करती हैं। अब होम पेज पर मेरा हेडर बिल्कुल अन्य सभी पेजों की तरह ही है।

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.twentyseventeen-front-page.has-header-image .custom-header-media, 
.twentyseventeen-front-page.has-header-video .custom-header-media, 
.home.blog.has-header-image .custom-header-media, 
.home.blog.has-header-video .custom-header-media {
    height: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}

Comments

"पहला खंड छवि की ऊंचाई को नियंत्रित करता है, दूसरा खंड छवि के लिए स्थान की ऊंचाई को नियंत्रित करता है।" - केवल सामने वाले पृष्ठ पर मुझे लगता है?

— Rup

रूप सही है: "केवल फ्रंट पेज पर," इसलिए मैंने उत्तर संपादित किया।

— pfinley