0ویب سائٹس کے لئے قبول پس منظر کی تصاویر

میں حال ہی میں اپنی ویب سائٹ اور ویب سرور کو اپ ڈیٹ کر رہا ہوں اور ایک نئی سائٹ شامل کر رہا ہوں (LoveCrete.org). میں چاہتا تھا کہ لیوکریٹ پر ایک بیک گراونڈ امیج ہو اور اس کو یقینا realized احساس ہوا 1 سائز ہر اسکرین پر فٹ نہیں ہوتا ہے. یہاں میری سوچ کیا تھی کا ایک خلاصہ ہے اور اسکرین کے متعدد سائز اور واقفیت کو پورا کرنے کے لئے میں نے کیا کیا.

کون سی سمت بندی

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); }}
}