রেটিনা প্রদর্শন, উচ্চ-প্রতিচ্ছবি পটভূমি চিত্র

Question

এটি একটি নির্বোধ প্রশ্নের মতো শোনাতে পারে।

আমি যদি নিয়মিত প্রদর্শনের জন্য এই সিএসএস স্নিপেট ব্যবহার করি ( box-bg.png200px বাই 200px কোথায় );

.box{
    background:url('images/box-bg.png') no-repeat top left;
    width:200px;
    height:200px
}

এবং যদি আমি রেটিনা ডিসপ্লেগুলিকে লক্ষ্য করতে এই জাতীয় মিডিয়া কোয়েরি ব্যবহার করি (@ 2x চিত্রটি উচ্চ-রেজাল্ট সংস্করণ হিসাবে);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/[e-mail]') no-repeat top left;}
}

.boxনতুন হাই রেজোলিউড ব্যাকগ্রাউন্ড ইমেজের সাথে মেলে আমার কি ডিভের আকার 400px দ্বারা 400px দ্বিগুণ করতে হবে?

Comments

চিত্র / বাক্স- [e-mail] এর মাত্রা কী? একেবারে পরিষ্কার হওয়ার জন্য দয়া করে এটিকে প্রশ্নটিতে রাখুন।

— টিএমএস

Answer 1

নতুন হাই রেজোলিউড ব্যাকগ্রাউন্ড ইমেজটির সাথে মিলে যাওয়ার জন্য আমাকে কি .box ডিভের আকার 400px দ্বারা 400px এর দ্বিগুণ করতে হবে?

না, তবে আপনাকে background-sizeআসল মাত্রাগুলির সাথে মিল রাখতে সম্পত্তি নির্ধারণ করতে হবে :

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/[e-mail]') no-repeat top left;
        background-size: 200px 200px;
    }
}

---

সম্পাদনা

এই উত্তরে আরও কিছু যুক্ত করতে, এখানে আমি ব্যবহার করি এমন রেটিনা সনাক্তকরণ ক্যোয়ারীটি এখানে:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

- উৎস

বিশেষ দ্রষ্টব্য। এটি min--moz-device-pixel-ratio:কোনও টাইপো নয়। এটি ফায়ারফক্সের কয়েকটি সংস্করণে একটি ভাল ডকুমেন্টেড বাগ এবং পুরানো সংস্করণগুলিকে সমর্থন করার জন্য এইভাবে লেখা উচিত (ফায়ারফক্স ১ 16 এর পূর্বে)। - উৎস

---

@ লিয়ামনিউমার্চ নীচের মন্তব্যে যেমন উল্লেখ করেছেন, আপনি background-sizeনিজের শর্টহ্যান্ড backgroundঘোষণায় এটির মতো অন্তর্ভুক্ত করতে পারেন :

.box{
    background:url('images/[e-mail]') no-repeat top left / 200px 200px;
}

তবে আমি ব্যক্তিগতভাবে শর্টহ্যান্ড ফর্মটি ব্যবহার করার পরামর্শ দেব না কারণ এটি আইওএস <= 6 বা অ্যান্ড্রয়েডে সমর্থিত নয় কারণ বেশিরভাগ পরিস্থিতিতে এটি অবিশ্বাস্য।

Comments

একটি পূর্ণ পৃষ্ঠা ব্যাকগ্রাউন্ডের জন্য ব্যাকগ্রাউন্ড-আকার সেট করার জন্য আপনি যে কোনও টিপ অফার করবেন? আমি এক্স উপাদানগুলির প্রস্থ জানি, তবে y এর কীভাবে?

— র্যান্ডি এল

@ অন্য যে ক্ষেত্রে আপনি সম্ভবত ব্যবহার করতে চান background-size: cover;। এটি চিত্রের সাথে পুরো ব্যাকগ্রাউন্ডটি "আচ্ছাদন" করার ক্ষেত্রে দিক অনুপাত বজায় রাখবে।

— টার্নিপ

আপনি যদি চান তাহলে, আপনি সংহত করতে পারেন background-sizeমধ্যে সম্পত্তি backgroundযেমন: background: url('images/[e-mail]') no-repeat top left / 200px 200px। মনে রাখবেন যে ব্রাউজারগুলি সমর্থন করে background-sizeনা তারা এই নিয়মটিকে উপেক্ষা করবে।

— লিয়াম নিউমার্চ

@ লিয়ামনিউমার্চ আমি সুপারিশ করব না যে অ্যান্ড্রয়েড হিসাবে নিজেকে শর্টহ্যান্ড ফর্মটি বোঝে না বলে মনে হয়

— টার্নিপ

@ 3rror404 আহ ঠিক আছে, যথেষ্ট ন্যায্য। ধন্যবাদ!

— লিয়াম নিউমার্চ

Answer 2

এখানে এমন একটি সমাধান রয়েছে যাতে উচ্চ (এর) ডিপিআই ( এমডিপিআই ) ডিভাইসগুলি > বেশ কয়েকটি নন-আইওএস ডিভাইসগুলির মতো ইঞ্চি প্রতি 160 ডট অন্তর্ভুক্ত রয়েছে ( ফী : গুগল নেক্সাস 7 2012 ):

.box {
    background: url( 'img/box-bg.png' ) no-repeat top left;
    width: 200px;
    height: 200px;
}
@media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ),
       only screen and (    min--moz-device-pixel-ratio: 1.3 ),
       only screen and (      -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */
       only screen and (         min-device-pixel-ratio: 1.3 ),
       only screen and ( min-resolution: 124.8dpi ),
       only screen and ( min-resolution: 1.3dppx ) {

       .box {
           background: url( 'img/[e-mail]' ) no-repeat top left / 200px 200px;
       }

}

মন্তব্যগুলি থেকে প্রতিক্রিয়া পাওয়ার পরে @ 3rror404 যেমন তার সম্পাদনায় অন্তর্ভুক্ত রয়েছে, ওয়েবকিট / আইফোনের বাইরেও একটি বিশ্ব রয়েছে। সিএসএস-ট্রিক্সে উপরের উত্স হিসাবে রেফারেন্সযুক্ত মত এখন পর্যন্ত বেশিরভাগ সমাধানের সাথে আমাকে যে জিনিসগুলি বাগ দিয়েছে , তা হ'ল এটি পুরোপুরি বিবেচনায় নেওয়া হয়নি। মূল উৎস ইতিমধ্যে আরও গেলেন।

একটি উদাহরণ নেক্সাস 7 (2012) স্ক্রীনে একটি হল একটি অদ্ভুত সঙ্গে tvdpi পর্দা device-pixel-ratioএর1.325 । চিত্রগুলি সাধারণ রেজোলিউশনের সাথে লোড করার সময় এগুলি আন্তঃবিবাহের মাধ্যমে উত্ক্রান্ত করা হয় এবং তাই ঝাপসা হয়। আমার জন্য এই নিয়মটি মিডিয়া ক্যোয়ারিতে প্রয়োগ করে সেই ডিভাইসগুলি অন্তর্ভুক্ত করতে সেরা গ্রাহকের প্রতিক্রিয়া সাফল্য পেয়েছে।

Comments

প্রতিটি মাত্রার একটি ইমেজ 2x এর ঠিক 4x পিক্সেল থাকে (উদাহরণস্বরূপ, তাত্ত্বিকভাবে আকারে 4x হওয়া আশা করা যায়), যেখানে 1.325 * 1.325 পিক্সেলটিতে কেবল 1.755625 বৃদ্ধি সমর্থন করে। আমি মনে করি 1.325 ডিপিপি দিয়ে কোনওভাবেই চিত্রটির গুণমান নষ্ট হয়ে যাবে, তবে আপনি যদি হাইডিপিআই যান তবে ক্লায়েন্টকে কেবল পৃষ্ঠা লোডের জন্য আরও অপেক্ষা করতে হবে, চিত্রটির পুনরায় আকার দেওয়ার উচ্চতর বিদ্যুৎ খরচ হবে (এবং নেক্সাস 7 টেবিলগুলি বেশ রয়েছে এলোমেলো রিবুট জন্য পরিচিত), এবং আরও ব্যান্ডউইথ গ্রহণ। সুতরাং, আমি সাথে স্টিকিং সুপারিশ করব@2x কেবল 2dppx+ ক্লায়েন্টদের পরিবেশন করাতে ।

— সিএনএসটি

Answer 3

আপনি যদি একই চিত্রটি রেটিনা এবং নন-রেটিনা পর্দার জন্য ব্যবহার করার পরিকল্পনা করছেন তবে সমাধানটি এখানে দেওয়া হল। বলুন যে আপনার একটি চিত্র রয়েছে 200x200এবং উপরের সারিতে দুটি আইকন এবং নীচের সারিতে দুটি আইকন রয়েছে। সুতরাং, এটি চার কোয়াড্রেন্ট।

.sprite-of-icons {
  background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat;
  background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */
}

.sp-logo-1 { background-position: 0 0; }

/* Reduce positioning of the icons down to 50% rather using -50px */
.sp-logo-2 { background-position: -25px 0 }
.sp-logo-3 { background-position: 0 -25px }
.sp-logo-3 { background-position: -25px -25px }

স্প্রিট আইকনগুলির স্কেলিং এবং অবস্থান প্রকৃত মানের চেয়ে 50% হয়ে গেলে আপনি প্রত্যাশিত ফলাফল পেতে পারেন।

---

রায়ান বেনহেসের আর একটি কার্যকর এসসিএসএস মিক্সিন সমাধান ।

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

div.background {
  @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}

উপরের মিশিন সম্পর্কে আরও তথ্যের জন্য এখানে পড়ুন ।