I’ve recently been updating my websites and web server and adding a new site (LoveCrete.org). I wanted to have a background image on LoveCrete and realised that of course 1 size doesn’t fit all screens. Here is a summary of what my thinking was and what I did to cater for the numerous screen sizes and orientations.
কোনটি অভিযোজন
I started by making myself a little table of all the common resolutions used on পিসি and tablets (in horizontal orientation). I decided to focus on this because most images are available in landscape so this is a sensible place to start.
I decided that I would place images centrally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in portrait orientation it will load the image based on height (না প্রস্থ) এবং ইমেজ উভয় প্রান্ত থেকে অনেক কিছু হারাবেন. Doing it any other way would mean needing images cropped to a totally different shape or having a landscape image “tile” on a tall screen, যা কাম্য নয়.
The ratios of the maximum size image to make in each group were all around 1.6 with a few a bit higher. To keep things simpler I decided to use a ratio of 16:10 সব ইমেজ জন্য এবং মাপ অনুসারে করা নিয়ে এসেছেন.
This means in most cases the image will not be a perfect fit to the screen size, but all screens will get something very close and no screen will end up with something too small. এটিও মানে একটি উৎস চিত্রে মুণ্ডিত করা যেতে পারে 16:10 once and then multiple sizes easily created
প্রচলিত ভূদৃশ্য রেজল্যুশন গ্রুপ
উচ্চতা | প্রস্থ | বানানোর জন্য চিত্র | Com-ments | ||
---|---|---|---|---|---|
4:3 | 16:10 | 16:9 | |||
2160 | 2880 | 3840 | 2400×3840 | 4ট UHD | |
1600 1536 1440 | - 2048 1920 | 2560 - - | - - 2560 | 1600×2560 | |
1200 1080 1050 | 1600 1440 1400 | 1920 - 1680 | - 1920 - | 1200×1920 | সম্পূর্ণ HD 1080p |
960 900 | 1280 1200 | 1536 1440 | - 1600 | 1000×1600 | |
800 768 720 | - 1024 960 | 1280 - - | - - 1280 | 8001280 × | 720পি |
600 576 | 800 768 | 960 - | - 1024 | 640×1024 | |
480 | 640 | 768 | 480×768 |
As you can see I have grouped quite a few resolutions and will then make 1 image that will cover all heights up to the largest height in that group. I will make sure the image is also wide enough for the maximum width such a height might be paired with on a normal screen. I haven’t taken account of unusual configurations like 21:9 monitors or multiple screens — there has to be a limit somewhere!
কারণ সিএসএস uses the viewport or browser size and not the screen size landscape screens need to use width rather than height — as on most systems the top and bottom lose space to title bars etc whilst the width is usually maximised. কীভাবে কখনও, for portrait displays it is better to use the height property. এই যেমন কাজ করা যেতে পারে সিএসএস can identify the screen orientation
দ্য সিএসএস ব্যবহৃত তারপর নিম্নরূপ দেখায়
শরীর{পটভূমি পুনরাবৃত্তি: নো-পুনরাবৃত্তি; পৃষ্ঠভূমি সংযুক্তি: স্থির; পটভূমি অবস্থানে রয়েছে এমন: কেন্দ্র কেন্দ্র; পটভূমি আকার: আবরণ;} @মিডিয়া (সর্বোচ্চ প্রস্থ: 768px আকারে) {শরীর { পটভূমি চিত্র: URL(bg480.jpg); }} @মিডিয়া (মিনিট-প্রস্থের:769px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1024px আকারে) {শরীর { পটভূমি চিত্র: URL(bg640.jpg); }} @মিডিয়া (মিনিট-প্রস্থের:1025px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1280px আকারে) {শরীর { পটভূমি চিত্র: URL(bg800.jpg); }} @মিডিয়া (মিনিট-প্রস্থের:1281px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1600px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1000.jpg); }} @মিডিয়া (মিনিট-প্রস্থের:1601px আকারে) এবং (সর্বোচ্চ প্রস্থ: 1920px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1200.jpg); }} @মিডিয়া (মিনিট-প্রস্থের:1921px আকারে) এবং (সর্বোচ্চ প্রস্থ: 2560px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1600.jpg); }} @মিডিয়া (মিনিট-প্রস্থের:2561px আকারে) {শরীর { পটভূমি চিত্র: URL(../ইমেজ / bg2400.jpg); }} @মিডিয়া (ঝোঁক: প্রতিকৃতি){ @মিডিয়া (সর্বোচ্চ উচ্চতা: 480px আকারে) {শরীর { পটভূমি চিত্র: URL(bg480.jpg); }} @মিডিয়া (মিনিট-উচ্চতা:481px আকারে) এবং (সর্বোচ্চ উচ্চতা: 640px আকারে) {শরীর { পটভূমি চিত্র: URL(bg640.jpg); }} @মিডিয়া (মিনিট-উচ্চতা:641px আকারে) এবং (সর্বোচ্চ উচ্চতা: 800px আকারে) {শরীর { পটভূমি চিত্র: URL(bg800.jpg); }} @মিডিয়া (মিনিট-উচ্চতা:801px আকারে) এবং (সর্বোচ্চ উচ্চতা: 1000px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1000.jpg); }} @মিডিয়া (মিনিট-উচ্চতা:1001px আকারে) এবং (সর্বোচ্চ উচ্চতা: 1200px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1200.jpg); }} @মিডিয়া (মিনিট-উচ্চতা:1201px আকারে) এবং (সর্বোচ্চ উচ্চতা: 1600px আকারে) {শরীর { পটভূমি চিত্র: URL(bg1600.jpg); }} @মিডিয়া (মিনিট-উচ্চতা:1601px আকারে) {শরীর { পটভূমি চিত্র: URL(bg2400.jpg); }} }
“Hi James I realise it has been a long while, but I just checked this on windows 11 (build 23H2)…”