0वेबसाइटों के लिए उत्तरदायी पृष्ठभूमि छवियों

I’ve recently been updat­ing my web­sites and web serv­er and adding a new site (LoveCrete.org). I wanted to have a back­ground image on LoveCrete and real­ised that of course 1 size does­n’t fit all screens. Here is a sum­mary of what my think­ing was and what I did to cater for the numer­ous screen sizes and orientations.

कौन सा उन्मुखीकरण

I star­ted by mak­ing myself a little table of all the com­mon res­ol­u­tions used on पीसी and tab­lets (in hori­zont­al ori­ent­a­tion). I decided to focus on this because most images are avail­able in land­scape so this is a sens­ible place to start.

I decided that I would place images cent­rally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in por­trait ori­ent­a­tion it will load the image based on height (नहीं चौड़ाई) और छवि के दोनों किनारे से एक बहुत खो देंगे. Doing it any oth­er way would mean need­ing images cropped to a totally dif­fer­ent shape or hav­ing a land­scape image “tile” on a tall screen, जो वांछनीय नहीं है.

The ratios of the max­im­um size image to make in each group were all around 1.6 with a few a bit high­er. To keep things sim­pler I decided to use a ratio of 16:10 सभी छवियों के लिए और आकार के हिसाब से बनाने के लिए के साथ आया था.

This means in most cases the image will not be a per­fect fit to the screen size, but all screens will get some­thing very close and no screen will end up with some­thing too small. इसका यह भी मतलब एक स्रोत छवि के लिए क्रॉप किया जा सकता है 16:10 once and then mul­tiple sizes eas­ily created

आम परिदृश्य संकल्प समूहों

As you can see I have grouped quite a few res­ol­u­tions and will then make 1 image that will cov­er all heights up to the largest height in that group. I will make sure the image is also wide enough for the max­im­um width such a height might be paired with on a nor­mal screen. I haven’t taken account of unusu­al con­fig­ur­a­tions like 21:9 mon­it­ors or mul­tiple screens — there has to be a lim­it somewhere!

इसलिये सीएसएस uses the view­port or browser size and not the screen size land­scape screens need to use width rather than height — as on most sys­tems the top and bot­tom lose space to title bars etc whilst the width is usu­ally max­im­ised. कैसे कभी, for por­trait dis­plays it is bet­ter to use the height prop­erty. यह के रूप में किया जा सकता है सीएसएस can identi­fy the screen orientation

The सीएसएस इस्तेमाल किया तो इस प्रकार लग रहा है

तन{पृष्ठभूमि दोहराएँ: कोई दोहराने; पृष्ठभूमि संलग्न: स्थिर; पृष्ठभूमि स्थिति: केंद्र केंद्र; पृष्ठभूमि आकार: आवरण;}

@media (अधिकतम चौड़ाई: 768पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg480.jpg); }}
@media (न्यूनतम-चौड़ाई:769पिक्सल) तथा (अधिकतम चौड़ाई: 1024पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg640.jpg); }}
@media (न्यूनतम-चौड़ाई:1025पिक्सल) तथा (अधिकतम चौड़ाई: 1280पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg800.jpg); }}
@media (न्यूनतम-चौड़ाई:1281पिक्सल) तथा (अधिकतम चौड़ाई: 1600पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1000.jpg); }}
@media (न्यूनतम-चौड़ाई:1601पिक्सल) तथा (अधिकतम चौड़ाई: 1920पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1200.jpg); }}
@media (न्यूनतम-चौड़ाई:1921पिक्सल) तथा (अधिकतम चौड़ाई: 2560पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1600.jpg); }}
@media (न्यूनतम-चौड़ाई:2561पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(../छवियों / bg2400.jpg); }}

@media (उन्मुखीकरण: चित्र){
@media (अधिकतम ऊँचाई: 480पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg480.jpg); }}
@media (मिनट-ऊंचाई:481पिक्सल) तथा (अधिकतम ऊँचाई: 640पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg640.jpg); }}
@media (मिनट-ऊंचाई:641पिक्सल) तथा (अधिकतम ऊँचाई: 800पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg800.jpg); }}
@media (मिनट-ऊंचाई:801पिक्सल) तथा (अधिकतम ऊँचाई: 1000पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1000.jpg); }}
@media (मिनट-ऊंचाई:1001पिक्सल) तथा (अधिकतम ऊँचाई: 1200पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1200.jpg); }}
@media (मिनट-ऊंचाई:1201पिक्सल) तथा (अधिकतम ऊँचाई: 1600पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg1600.jpg); }}
@media (मिनट-ऊंचाई:1601पिक्सल) {तन { पृष्ठभूमि छवि: यूआरएल(bg2400.jpg); }}
}