उत्तरदायी सीएसएस पृष्ठभूमि छवियों

Question

मेरे पास एक वेबसाइट है (g-floors.eu) और मैं पृष्ठभूमि बनाना चाहता हूं (सीएसएस में मैंने सामग्री के लिए एक बीजी-छवि को परिभाषित किया है) भी उत्तरदायी है। दुर्भाग्य से मुझे वास्तव में इस बारे में कोई भी जानकारी नहीं है कि इसे कैसे करना है, इसके अलावा मैं एक चीज के बारे में सोच सकता हूं, लेकिन यह काफी कारगर है। कई छवियों का निर्माण और फिर छवियों को बदलने के लिए सीएसएस स्क्रीन आकार का उपयोग कर, लेकिन मैं यह जानना चाहता हूं कि क्या इसे प्राप्त करने के लिए अधिक व्यावहारिक तरीका है।

मूल रूप से मैं जो हासिल करना चाहता हूं वह यह है कि छवि (वॉटरमार्क 'जी' के साथ) छवि के कम प्रदर्शित किए बिना स्वचालित रूप से आकार बदल जाती है। यदि यह संभव है

लिंक: g-floors.eu

कोड I अब तक (सामग्री भाग)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

Comments

इस लिंक पर एक नज़र डालें, यह वही हो सकता है जिसे आप खोज रहे हैं? css-tricks.com/perfect-full-page-background-image

— Christofer Vilander

मैं इस समाधान को महसूस करता हूं कि क्रिस्टोफ़र विलेंडर ने चुने हुए उत्तर की तुलना में एक बेहतर समाधान है।

— CU3ED

बस सोच रहा था कि साइट वास्तव में इस आकार बदलने की सुविधा को लागू नहीं करती है जिसके बारे में आप फरवरी 2015 से पूछ रहे थे? क्या इसके साथ कुछ समस्या थी?

— लीजेंडलॉग्रेशन

Answer 1

यदि आप ब्राउज़र विंडो के आकार के आधार पर समान छवि चाहते हैं:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

चौड़ाई, ऊंचाई या मार्जिन निर्धारित न करें।

संपादित करें: चौड़ाई, ऊंचाई या मार्जिन की स्थापना के बारे में पिछली पंक्ति ओपी के मूल प्रश्न को खिड़की के आकार के साथ स्केलिंग के बारे में संदर्भित करती है। अन्य उपयोग के मामलों में, यदि आवश्यक हो तो आप चौड़ाई / ऊंचाई / मार्जिन निर्धारित करना चाहते हैं।

Comments

क्या यह भी संभव है कि ऑटो चौड़ाई का आकार बदल दे और ऊंचाई तय कर दे?

— जॉकेमेक

हां, आप पिक्सेल में छवि की ऊंचाई और पेरेन्ट्स में चौड़ाई निर्धारित कर सकते हैं, लेकिन छवि नष्ट हो जाएगी। यह अच्छा नहीं लगेगा।

— आंद्रेई वोल्जिन

यदि आप एक वेक्टर प्रारूप का उपयोग करते हैं तो आप बहुत छोटी छवि का उपयोग कर सकते हैं: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics

— Andrei Volgin

क्या? कंटेनर की चौड़ाई, ऊँचाई सेट नहीं करने से छवि बिल्कुल नहीं दिखेगी।

— हिम

(1) मूल प्रश्न ब्राउज़र विंडो के आकार के आधार पर स्केलिंग के बारे में था। (२) जैसे तत्व divअपनी सामग्री से अपनी ऊँचाई प्राप्त करते हैं, या एक फ्लेक्सबॉक्स मॉडल में उपलब्ध स्थान लेते हैं। यह कहना कि स्पष्ट चौड़ाई / ऊँचाई के बिना कंटेनर बिल्कुल नहीं दिखाई देगा गलत है। जाहिर है, यदि आप एक पृष्ठभूमि छवि के साथ एक खाली डिव प्रदर्शित करना चाहते हैं, तो आपको ऊंचाई और, संभवतः, चौड़ाई सेट करने की आवश्यकता होगी, लेकिन तब आपको छवि का केवल एक हिस्सा दिखाई देगा, जब तक कि पहलू अनुपात बिल्कुल एक जैसा न हो छवि ही।

— आंद्रेई वोल्गिन

Answer 2

इस कोड के द्वारा आपकी पृष्ठभूमि छवि केंद्र पर जाती है और इसे आकार देती है जो भी आपके div आकार में परिवर्तन करता है, छोटे, बड़े, सामान्य आकार के लिए अच्छा है, सभी के लिए सबसे अच्छा है, मैं इसे अपनी परियोजनाओं के लिए उपयोग करता हूं जहां मेरी पृष्ठभूमि का आकार या div आकार बदल सकता है

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

Comments

स्क्रीन आकार 800x1280px पर, बॉक्स के दाईं ओर छवि कट जाती है। अन्य सभी आकार ठीक लगते हैं।

— मुग

Answer 3

इसे इस्तेमाल करे :

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

Answer 4

सीएसएस:

background-size: 100%;

यह ट्रिक काम आना चाहिए! :)

Comments

यह ब्राउज़र विंडो पहलू अनुपात के आधार पर छवि को पूरी तरह से विकृत कर देगा। ऐसा कभी नहीं करे।

— आंद्रेई वोल्जिन

बस भविष्य के संदर्भ के लिए, यह वास्तव में इस तरह बुरा नहीं लगेगा। बैकग्राउंड-साइज़: 100% 100% होगा, लेकिन केवल x को 100% घोषित करने से यह भयानक लग रहा है। टेस्ट केस: codepen.io/howlermiller/pen/syduB

— टिमोथी मिलर

यह "विकृत" नहीं लगेगा, लेकिन यह छवि को उसके इच्छित अनुपात से आगे बढ़ाएगा यदि यह कंटेनर से छोटा है ...

— कोड Novitiate

तो स्वीकृत उत्तर होगा। ओपी ने उस समस्या के बारे में नहीं पूछा, बस यह संभव था कि इसे अच्छी तरह से आकार दिया जा सके।

— टिमोथी मिलर

इस समाधान ने मेरी समस्या को ठीक कर दिया। +1

— जेपीजी

Answer 5

यहाँ उत्तरदायी पृष्ठभूमि छवि के लिए sass मिक्सिन है जो मैं उपयोग करता हूं। यह किसी भी blockतत्व के लिए काम करता है । बेशक सादे सीएसएस में काम कर सकते हैं आप बस paddingमैन्युअल रूप से गणना करने के लिए होगा ।

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

उदाहरण http://jsfiddle.net/XbEdW/1/

Comments

फिडेल में कोड (एक फ्रेमवर्क का उपयोग करता है) उत्तर में कोड से अलग है।

— बर्फ

Answer 6

यह एक आसान है =)

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

JsFiddle डेमो पर एक नज़र डालें

Answer 7

यहाँ सबसे अच्छा तरीका मुझे मिला है।

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

W3schools पर जाँच करें

अधिक उपलब्ध विकल्प

background-size: auto|length|cover|contain|initial|inherit;

Answer 8

मैंनें इस्तेमाल किया

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

जो वास्तव में अच्छी तरह से काम किया।

Comments

यही वह कोड है जिसकी मुझे आवश्यकता है! धन्यवाद :)) मैं स्क्रीन के 100% पर 200px ऊंचाई पर लंबन करने की कोशिश कर रहा हूं और मुझे केवल पृष्ठभूमि के शीर्ष भाग की आवश्यकता है लेकिन पूरी छवि के अनुपात को ध्यान में रखते हुए।

— thinklinux

Answer 9

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

Answer 10

नीचे छवि ऊंचाई / चौड़ाई x 100 = पैडिंग-तल% में पैडिंग जोड़कर उत्तरदायी वेबसाइट:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

---

अधिक जटिल विधि:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

---

जादुई अच्छी स्क्रिप्ट देखने के लिए पृष्ठभूमि eq फ़ायरफ़ॉक्स Ctrl + M का आकार बदलने की कोशिश करें जो मुझे सबसे अच्छा लगता है:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Answer 11

आप इसका उपयोग कर सकते हैं। मैंने परीक्षण किया है और इसका काम 100% सही है:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

आप इस स्क्रीन साइज़ सिम्युलेटर पर अपनी वेबसाइट को जवाबदेही के साथ परख सकते हैं: http://www.infobyip.com/testwebsiteresolution.pp

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

यदि आप एक छवि प्रपत्र अन्य साइट / URL का उपयोग करना चाहते हैं और जैसे नहीं: background-image:url('../images/bg.png'); // यह संरचना अपने स्वयं के होस्ट किए गए सर्वर से छवि का उपयोग करने के लिए है। तो इस तरह का उपयोग करें: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

का आनंद लें :)

Answer 12

यदि आप चाहते हैं कि पूरी छवि पहलू अनुपात के बावजूद दिखाई दे, तो यह प्रयास करें:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

यह पूरी छवि दिखाएगा चाहे स्क्रीन आकार कोई भी हो।

Answer 13

    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>

Answer 14

कोड की सिर्फ दो लाइनें, यह काम करती हैं।

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

Answer 15

JQuery के साथ वर्ग अनुपात के लिए अनुकूली

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }

Answer 16

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

या

background-size:100%;

Answer 17

मुझे लगता है, यह करने का सबसे अच्छा तरीका है:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

इस तरह से ज्यादा कुछ नहीं करने की जरूरत नहीं है और यह काफी सरल है।

कम से कम, यह मेरे लिए काम करता है।

मुझे उम्मीद है यह मदद करेगा।

Answer 18

चौड़ाई के लिए दो और एक के लिए दो ऊंचाई background-sizeका उपयोग करके उपयोग करने की कोशिश करें

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

Answer 19

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

स्थिति संपत्ति का उपयोग आपकी आवश्यकता के अनुसार शीर्ष तल और केंद्र को संरेखित करने के लिए किया जा सकता है और पृष्ठभूमि का आकार केंद्र फसल (कवर) या पूर्ण छवि (समाहित या 100%) के लिए उपयोग किया जा सकता है