আমি কীভাবে কোনও সিএসএস স্প্রিতে কোনও চিত্র স্কেল করতে পারি

Question

Http://css-tricks.com/css-sprites/ এই নিবন্ধে, এটি কীভাবে 1 টি বড় চিত্র থেকে আমি একটি ছোট চিত্র কাটাতে পারি সে সম্পর্কে আলোচনা করে। আপনি কি দয়া করে আমাকে বলতে পারবেন যদি এটি সম্ভব হয় / আমি কীভাবে একটি ছোট চিত্র ছাঁটাতে পারি এবং তারপরে ছড়িয়ে দেওয়ার আগে আমি ক্রপযুক্ত অঞ্চলটি স্কেল করতে পারি?

এখানে এই নিবন্ধ থেকে একটি উদাহরণ:

A
{
  background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/3deb155981/spriteme1.png);
  background-position: -10px -56px;
}

আমি স্প্রিটেম 1.পিএনজি থেকে ক্রপ করার পরে আমি কীভাবে এই চিত্রটি স্কেল করতে পারি তা জানতে চাই

এখানে উদাহরণের ইউআরএল: http://css-tricks.com/example/CSS-Sprites/Example1After/

সুতরাং আমি জানতে চাই আমি আইটেম 1,2,3,4 এর পাশে আইকনগুলি তৈরি করতে পারি কিনা?

Comments

স্টিফেন যেমন জিজ্ঞাসা করেছিলেন, আপনি প্রথমে যে আকারে ইমেজগুলি চান তা চিত্রের রেন্ডিং থেকে বিরত থাকার কিছু আছে?

— পল ডি ওয়েট

আমি এই পৃষ্ঠায় শেষ করেছি যেহেতু আমি একই জিনিসটির জন্য উত্তর অনুসন্ধান করছি। হাই ডেফিনিশন রেটিনা সহ আজকের বিশ্বে এটি চিত্রের চেয়ে দ্বিগুণ আকারের চিত্র তৈরির প্রথাগত প্রদর্শন করে এবং <img> বৈশিষ্ট্য বা সিএসএস শৈলীতে উচ্চতা / প্রস্থের মানগুলি অর্ধেক উচ্চতা / প্রস্থকে হ্রাস করার জন্য প্রদর্শন করার সময় এটি ব্যবহার করার প্রথাগত। এটি স্মার্টফোন এবং ট্যাবলেটগুলিতে খাস্তা প্রদর্শন নিশ্চিত করে। তবে পিএনজি স্প্রিটগুলি দ্রুত ক্যাশে এবং রেন্ডারিংয়ের জন্য দুর্দান্ত। এটি কেবলমাত্র 2x ইমেজের একটি স্প্রিট ব্যবহার করা ভাল নয়, তবে এটি আকারে স্কেল করা যাতে এটি খাস্তাও দেখা দেয়।

— আর্ট গিগেল

যেহেতু মূল প্রশ্নটির কোনও গ্রহণযোগ্য উত্তর পাওয়া যায় নি এবং একটি সুন্দর ঝরঝরে এবং পশ্চাদপটে সামঞ্জস্যপূর্ণ সমাধান রয়েছে, তাই আমি একটি নতুন কোডপেন স্ট্রেচি সংস্করণ তৈরি করলাম , যেহেতু মূল ওয়েবসাইটটি অনলাইনে অনলাইনে নেই এবং মায়াবেবে এখনও কিছু লোক আছে যারা পিছিয়ে পড়া দরকার সামঞ্জস্যপূর্ণ সমাধান। আমি মূল কাজ / লেখকের বিশিষ্টতা দিয়ে কলম তৈরি করেছি।

— সমস্ত বিট সমান

Answer 1

আপনি ব্যাকগ্রাউন্ড-আকারটি বেশিরভাগ ব্রাউজার দ্বারা সমর্থিত হিসাবে ব্যবহার করতে পারেন (তবে সমস্ত http://caniuse.com/#search=background-size নয় )

background-size : 150% 150%;

অথবা

আপনি ওয়েবকিট / ie এর জন্য একটি জুমের কম্বো এবং রূপান্তর করতে পারেন: ফায়ারফক্সের জন্য স্কেল (-মোজ-) এবং ক্রস ব্রাউজারের ডেস্কটপ এবং মোবাইলের জন্য অপেরা (-o-)

[class^="icon-"]{
    display: inline-block;
    background: url('../img/icons/icons.png') no-repeat;
    width: 64px;
    height: 51px;
    overflow: hidden;
    zoom:0.5;
    -moz-transform:scale(0.5);
    -moz-transform-origin: 0 0;
}

.icon-huge{
    zoom:1;
    -moz-transform:scale(1);
    -moz-transform-origin: 0 0;
}

.icon-big{
    zoom:0.60;
    -moz-transform:scale(0.60);
    -moz-transform-origin: 0 0;
}

.icon-small{
    zoom:0.29;
    -moz-transform:scale(0.29);
    -moz-transform-origin: 0 0;
}

Comments

ক্রোমে দুর্দান্ত কাজ করে, এফএফ, আই 9/10 এ ঠিক আছে। বেশিরভাগ অংশের জন্য কাঙ্ক্ষিত প্রভাব তৈরি করে।

— আরসি নীল

(উদাহরণস্বরূপ) পটভূমি-আকার ব্যবহার করে: 15%; সঠিক দিক অনুপাত রাখার সময় স্প্রাইটের জন্য নিখুঁত কাজ করে। প্রতিক্রিয়াশীল সাইটগুলিতে ব্রেকপয়েন্ট সহ এটি ব্যবহার করার একটি সহজ সমাধান।

— C13L0

ব্যাকগ্রাউন্ড-আকারের সম্পত্তিটি একটি নির্দিষ্ট উচ্চতা এবং প্রস্থ সহ আমার এসভিজি স্প্রিটের জন্য কাজ করে না, তবে স্কেলটি কৌশলটি করেছে।

— আন্দ্রে

আইই 8-তে সমর্থন যুক্ত করার জন্য, -8-জুম বৈশিষ্ট্যটি আইই 8 স্ট্যান্ডার্ডস মোডে জুমের প্রতিশব্দ হিসাবে ব্যবহার করুন। -এমএস-জুম: 0.7; : আরও বিস্তারিত জানার জন্য নিচে লিঙ্কটি দেখুন msdn.microsoft.com/en-us/library/ms531189(v=vs.85).aspx

— আমর

2017 আপডেট: ব্যাকগ্রাউন্ড-আকার IE9 + সহ সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত। caniuse.com/#search=background-size

— নাথান

Answer 2

আপনি যখন স্প্রাইট ব্যবহার করেন, আপনি স্প্রাইটে চিত্রের মাত্রাগুলির মধ্যে সীমাবদ্ধ। background-sizeসিএসএস সম্পত্তি, স্টিফেন উল্লেখ ব্যাপকভাবে এখনও সমর্থিত নয় এবং IE8 মত করে নিচের ব্রাউজার সঙ্গে সমস্যা হতে পারে - এবং তাদের মার্কেট শেয়ার দেওয়া, এই একটি টেকসই বিকল্প নয়।

সমস্যা সমাধানের আরেকটি উপায় হ'ল দুটি উপাদান ব্যবহার করা এবং স্প্রোইটকে imgট্যাগ সহ এটি ব্যবহার করে স্কেল করা, এটির মতো:

<div class="sprite-image"
     style="width:20px; height:20px; overflow:hidden; position:relative">
    <!-- set width/height proportionally, to scale the sprite image -->
    <img src="sprite.png" alt="icon"
         width="20" height="80"
         style="position:absolute; top: -20px; left: 0;" />
</div>

এইভাবে, বাহ্যিক উপাদান ( div.sprite-image) imgট্যাগ থেকে একটি 20x20px চিত্র ক্রপ করছে , যা মাপার মতো কাজ করে background-image।

Comments

Cletus কোয়েন্টিন statet মতো এখানে , এই শক্তি সেরা পদ্ধতির না। আমার জন্য এটি একটি ডিলব্রেকার - আমাকে srcসিএসএস দ্বারা নির্ধারিত করা দরকার ।

— জুক

-1: আপনি সামগ্রী / উপাত্তের সাথে উপস্থাপনা উপাদানগুলি মিশ্রিত করতে পারবেন না। <img>এটি যদি সামগ্রীর অংশ হয় তবেই ব্যবহার করা উচিত। ডিজাইনের উদ্দেশ্যে, ব্যাকগ্রাউন্ড চিত্রগুলি অবশ্যই আবশ্যক।

— শাহরিয়ার ইমানভ

সেরা উত্তর (ক) সর্বজনীনভাবে কাজ করে, (খ) মানুষের দ্বারা বোধগম্য, (গ) সংক্ষিপ্ত, ... (z) উপস্থাপনাটি সামগ্রী থেকে পৃথক করে।

— বব স্টেইন

Answer 3

এটি ব্যবহার করে দেখুন: স্ট্রেচি স্প্রেটিস - ক্রস ব্রাউজার, প্রতিক্রিয়াশীল আকার পরিবর্তন / সিএসএস স্প্রাইট চিত্রের প্রসারিত

এই পদ্ধতিটি স্প্রিটকে 'প্রতিক্রিয়াশীলভাবে' স্কেল করে যাতে আপনার ব্রাউজার উইন্ডোর আকার অনুযায়ী প্রস্থ / উচ্চতা সামঞ্জস্য করে। এটি পুরানো ব্রাউজারগুলিতে এর সমর্থন হিসাবে ব্যবহার করে না ।background-size

সিএসএস

.stretchy {display:block; float:left; position:relative; overflow:hidden; max-width:160px;}
.stretchy .spacer {width: 100%; height: auto;}
.stretchy .sprite {position:absolute; top:0; left:0; max-width:none; max-height:100%;}
.stretchy .sprite.s2 {left:-100%;}
.stretchy .sprite.s3 {left:-200%;}

এইচটিএমএল

<a class="stretchy" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s2" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>
<a class="stretchy s3" href="#">
  <img class="spacer" alt="" src="spacer.png">
  <img class="sprite" alt="icon" src="sprite_800x160.jpg">
</a>

Comments

লিঙ্কটি এখানে আসলে তত্ত্বটি ব্যাখ্যা করে না। আপনি ওভারফ্লো সহ একটি ডিভি ব্যবহার করছেন: স্প্রাইট চিত্রের একটি মাপানো সংস্করণ ব্যবহার করে উপরে ক্রপিং অঞ্চল / উইন্ডো হিসাবে লুকানো। যে কারণে এটি কোনও ব্যাকগ্রাউন্ড চিত্র ব্যবহার করে না। একটি মুখোশ হিসাবে অন্যের উপরে কেবল একটি স্তর।

— সাইমন

স্পেসারটি কি একটি চিত্র হতে পারে বা পরিবর্তে একটি সাধারণ ডিভ ব্যবহার করা যেতে পারে?

— ইস্পির

এটির একটি কোডপেন উদাহরণ এখানে । এটি কেবল অনুভূমিক বা উল্লম্ব স্প্রিটের জন্য কাজ করে বলে মনে হচ্ছে। গ্রিড নয়

— ওয়ার্নাইট

আমি একটি নতুন কোডেপেন স্ট্রেচি সংস্করণ তৈরি করেছি , কারণ মূল ওয়েবসাইটটি আর অনলাইনে নেই এবং মায়াবে এখনও কিছু লোক আছে যেগুলির পিছনে সামঞ্জস্যপূর্ণ সমাধানের প্রয়োজন। আমি মূল কাজ / লেখকের অনুষঙ্গ দিয়ে কলম তৈরি করেছি

— সমস্ত বিট

Answer 4

transform: scale(); মূল উপাদানটির আকার সংরক্ষণ করবে serve

আমি খুঁজে পেয়েছি সেরা বিকল্পটি ব্যবহার করা vw। এটি একটি কবজির মতো কাজ করছে:

https://jsfiddle.net/tomekmularczyk/6ebv9Lxw/1/

#div1,
#div2,
#div3 {
  background:url('//www.google.pl/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png') no-repeat;
  background-size: 50vw;   
  border: 1px solid black;
  margin-bottom: 40px;
}

#div1 {
  background-position: 0 0;
  width: 12.5vw;
  height: 13vw;
}
#div2 {
  background-position: -13vw -4vw;
  width: 17.5vw;
  height: 9vw;
  transform: scale(1.8);
}
#div3 {
  background-position: -30.5vw 0;
  width: 19.5vw;
  height: 17vw;
}

<div id="div1">
  </div>
  <div id="div2">
  </div>
  <div id="div3">
  </div>

Comments

হ্যালো এই প্রশ্নের উত্তর দেয় না। আপনার একই চিত্রের বিভিন্ন স্কেল দিয়ে তিনটি ডিভ দেখানো উচিত। কয়েকটি কথায়, এটি "ফন্ট" এর বিভিন্ন আকারের প্রদর্শন করা উচিত। আপনি এটা ঠিক করতে পারবো?

— রবার্ট

হাই @ রবার্ট তোমার কি অবস্থা?

— টমাসজ মুলারসিজিক

পিএস আপনি ভিডাব্লু মাপ ইউনিট ব্যবহার আচরণ লক্ষ্য করেছেন?

— রবার্ট

আমি নিশ্চিত নই, আপনি কী আচরণগুলি বোঝাতে চাইছেন?

— টমাসজ মুলারসিজিক

ভিডাব্লু ভিএইচ ভিউপোর্টের আকারের সাথে আনুপাতিকভাবে স্কেল করছে। আমি এখন পর্যন্ত এগুলি কখনও ব্যবহার করি নি। এটি আপনার ব্যবহারের অভিজ্ঞতা সম্পর্কে কৌতূহল মাত্র। এগুলি কি "যাদু" বা কিছু পরিস্থিতিতে আপনার নজরে পড়ে থাকতে পারে (অপ্রত্যাশিত আচরণ) বিবেচনা করার মতো সমস্যা রয়েছে? আপনাকে ধন্যবাদ

— রবার্ট

Answer 5

আমি এটি করতে কি করেছি তা এখানে। মনে রাখবেন এটি আইই 8 এবং এর নীচে কাজ করবে না।

#element {
  width:100%;
  height:50px;
  background:url(/path/to/image.png);
  background-position:140.112201963534% 973.333333333333%;
}

ব্যাকগ্রাউন্ড চিত্রটির প্রস্থ নীচে #elementস্কেলগুলির পিতামাতার হিসাবে স্কেল হবে । আপনি যদি heightশতাংশে রূপান্তর করেন তবে আপনি এর উচ্চতা দিয়েও এটি করতে পারেন । একমাত্র কৌতুকপূর্ণ বিটের জন্য শতাংশ নির্ধারণ করা হয় background-position।

প্রথম শতাংশ হ'ল স্প্রাইটের লক্ষ্যযুক্ত ক্ষেত্রের প্রস্থ যখন সাধারণ প্রস্থে স্প্রাইটের মোট প্রস্থ দ্বারা বিভক্ত হয় এবং 100 দ্বারা গুণিত হয়।

দ্বিতীয় শতাংশটি স্প্রাইটের মোট উচ্চতা দ্বারা বিভক্ত করে স্কেল করার আগে স্প্রাইটের লক্ষ্যবস্তু অঞ্চলের উচ্চতা এবং 100 দ্বারা গুণিত হয়।

এই দুটি সমীকরণের জন্য শব্দটি কিছুটা opালু, সুতরাং আপনার আরও ভাল ব্যাখ্যা করার জন্য আমার যদি প্রয়োজন হয় তবে আমাকে জানান।

Answer 6

এটি আমার পক্ষে কাজ করে বলে মনে হচ্ছে।

যদি স্প্রিটগুলি গ্রিডে থাকে তবে background-size100% সংখ্যায় স্প্রাইটের সংখ্যা এবং 100% স্প্রাইটের সংখ্যা নীচে সেট করুন। তারপরে background-position -<x*100>% -<y*100>%যেখানে x এবং y হ'ল শূন্য ভিত্তিক স্প্রাইট ব্যবহার করুন

অন্য কথায় আপনি যদি বাম এবং ২ য় সারির 3 য় স্প্রিট চান যা 2 ওভার এবং 1 নিচে রয়েছে

background-position: -200% -100%;

উদাহরণস্বরূপ এখানে একটি স্প্রিট শীট 4x2 স্প্রিট রয়েছে

এবং এখানে একটি উদাহরণ

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/AEYNC.png');
  background-size: 400% 200%;  /* 4x2 sprites so 400% 200% */
}
.s0x0 { background-position:    -0%   -0%; }
.s1x0 { background-position:  -100%   -0%; }
.s2x0 { background-position:  -200%   -0%; }
.s3x0 { background-position:  -300%   -0%; }
.s0x1 { background-position:    -0%  -100%; }
.s1x1 { background-position:  -100%  -100%; }
.s2x1 { background-position:  -200%  -100%; }
.s3x1 { background-position:  -300%  -100%; }

<div class="sprite s3x1" style="width: 45px; height:20px"></div>
<div class="sprite s3x1" style="width: 128px; height:30px"></div>
<div class="sprite s3x1" style="width: 64px; height:56px"></div>
<div class="sprite s2x1" style="width: 57px; height:60px"></div>
<div class="sprite s3x0" style="width: 45px; height:45px"></div>
<div class="sprite s0x1" style="width: 12px; height:100px"></div>

<br/>
<div class="sprite s0x0" style="width: 45px; height:20px"></div>
<div class="sprite s1x0" style="width: 128px; height:45px"></div>
<div class="sprite s2x0" style="width: 64px; height:56px"></div>
<div class="sprite s3x0" style="width: 57px; height:60px"></div>
<br/>
<div class="sprite s0x1" style="width: 45px; height:45px"></div>
<div class="sprite s1x1" style="width: 12px; height:50px"></div>
<div class="sprite s2x1" style="width: 12px; height:50px"></div>
<div class="sprite s3x1" style="width: 12px; height:50px"></div>

স্প্রাইটগুলি বিভিন্ন আকারের হলে আপনার background-sizeপ্রতিটি স্প্রাইটের জন্য শতাংশ এমন এক শতাংশে সেট করতে হবে যা স্প্রাইটের প্রস্থ 100% হয়ে যায়

অন্য কথায় যদি চিত্রটি 640px প্রশস্ত হয় এবং সেই চিত্রের অভ্যন্তরে স্প্রিট 45px প্রশস্ত হয় তবে 45px 640px হতে হবে

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

তারপরে আপনার অফসেট সেট করা দরকার। অফসেটের জটিলতা হ'ল 0% বামদিকে এবং 100% ডানদিকে প্রান্তিক করা হয়েছে।

গ্রাফিক্স প্রোগ্রামার হিসাবে, আমি আশা করি 100% এর অফসেটটি 100% উপাদানটিকে পুরো উপাদানটিকে পুরোপুরি ডান পাশের দিকে সরিয়ে নিয়ে 100% সরানো হবে তবে এটি যখন ব্যবহৃত হয় তখন 100% এর অর্থ কী তা নয় backgrouhnd-position। background-position: 100%;মানে ডান সারিবদ্ধ সুতরাং, এটি স্কেলিংয়ের পরে অ্যাকাউন্টে নেওয়ার জন্য ফোরামেলা

xOffsetScale = 1 + 1 / (xScale - 1)              
xOffset = offsetX * offsetScale / imageWidth

ধরুন অফসেটটি 31px

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

এখানে 2 স্প্রাইট সহ 640x480 চিত্র।

1. 31x 27y আকারে 45W 32 ঘন্টা
2. 500x 370y আকার 105W 65h এ

স্প্রাইট ১ এর জন্য উপরের গণিত অনুসরণ করা

xScale = imageWidth / spriteWidth
xScale = 640 / 45
xScale = 14.2222222222
xPercent = xScale * 100
xPercent = 1422.22222222%

xOffsetScale = 1 + 1 / (14.222222222 - 1)
xOffsetScale = 1.0756302521021115
xOffset = offsetX * xOffsetScale / imageWidth
xOffset = 31 * 1.0756302521021115 / 640
xOffset = 0.05210084033619603
xOffsetPercent = 5.210084033619603

yScale = imageHeight / spriteHEight
yScale = 480 / 32
yScale = 15
yPercent = yScale * 100
yPercent = 1500%

yOffsetScale = 1 + 1 / (15 - 1)
yOffsetScale = 1.0714285714285714
yOffset = offsetY * yOffsetScale / imageHeight
yOffset = 27 * 1.0714285714285714 / 480
yOffset = 0.06026785714285714
yOffsetPercent = 6.026785714285714

div {
  margin: 3px;
  display: inline-block;
}
.sprite {
  background-image: url('https://i.stack.imgur.com/mv9lJ.png');
}
.s1 {
  background-size:      1422.2222% 1500%;
  background-position:  5.210084033619603% 6.026785714285714%;
}
.s2 {
  background-size:      609.5238095238095% 738.4615384615385%;
  background-position:  93.45794392523367% 89.1566265060241%;
}

<div class="sprite s1" style="width: 45px; height:20px"></div>
<div class="sprite s1" style="width: 128px; height:30px"></div>
<div class="sprite s1" style="width: 64px; height:56px"></div>
<div class="sprite s1" style="width: 57px; height:60px"></div>
<div class="sprite s1" style="width: 45px; height:45px"></div>
<div class="sprite s1" style="width: 12px; height:50px"></div>
<div class="sprite s1" style="width: 50px; height:40px"></div>
<hr/>
<div class="sprite s2" style="width: 45px; height:20px"></div>
<div class="sprite s2" style="width: 128px; height:30px"></div>
<div class="sprite s2" style="width: 64px; height:56px"></div>
<div class="sprite s2" style="width: 57px; height:60px"></div>
<div class="sprite s2" style="width: 45px; height:45px"></div>
<div class="sprite s2" style="width: 12px; height:50px"></div>
<div class="sprite s2" style="width: 50px; height:40px"></div>

Comments

আপনি অফসেটএক্স এবং অফসেটওয়াইয়ের মানগুলি কীভাবে গণনা করেছেন?

— ট্রাইহার্ডার

Answer 7

পুরানো পোস্ট, তবে আমি এখানে ব্যবহার করে যা করেছি background-size:cover;(@ সায়ানাল পামিরের টুপি টিপ) ...

উদাহরণস্বরূপ ব্যবহার
অনুভূমিক বৃত্ত উল্লিখিত (সামনের দিকের চিত্রের উপর ঘোরা, বিভিন্ন চিত্রের সাথে পিছনে ফিরে আসতে হবে)।

উদাহরণ স্প্রিট 480px
x 240px

উদাহরণস্বরূপ শেষ আকারের
একক চিত্র @ 120px x 120px p

জেনেরিক কোড
.front {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:0px 0px;}

.back {width:120px; height:120px; background:url(http://www.example.com/images/image_240x240.png); background-size:cover; background-repeat:no-repeat; background-position:-120px 0px;}

বিস্মৃত কেস ফিডেল
http://jsfiddle.net/zuhloobie/133esq63/2/

Answer 8

পটভূমি আকার ব্যবহার করে দেখুন: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

আপনি প্রথমে যে আকারে চিত্রগুলি চান তা রেন্ডারিং থেকে বিরত থাকার কিছু আছে?

Comments

এটিকে সমাধান করার জন্য কি আমি জাভাস্ক্রিপ্ট এবং সিএসএস ব্যবহার করতে পারি? আমি ব্যাকগ্রাউন্ড-আকার চেষ্টা করেছি; সম্পত্তি। আমি এটি কাজ পেতে পারি না। এটি কোনও কারণে চিত্রটি স্কেল করে না।

— মাইকেল

background-sizeসিএসএস 3 এবং এখনও ব্যাপকভাবে সমর্থিত নয়।

— janmoesen

এটি এখন বেশিরভাগ ব্রাউজার সংস্করণ দ্বারা সমর্থিত। এই caniuse.com/#search=background-size

— কিরানভজ

Answer 9

এই সমস্যার সমাধান পেতে আমার কিছুটা সময় লেগেছিল আমি এতে খুশি:

সমস্যা:

• আইকনগুলির একটি এসভিজি স্প্রিট - বলুন 80px x 3200px

• আমরা ব্যবহারের আকারের ভিত্তিতে প্রতিটি স্প্রাইটের সমন্বয়গুলি পুনরায় সংজ্ঞায়িত না করে বিভিন্ন আকারে কন্টেন্ট সিলেক্টারে (: আগে /: পরে) তাদের প্রতিটি ব্যবহার স্কেল করতে চাই।

তাই এই সমাধান আপনি একটি একই পরী সহ-ords ব্যবহার করার অনুমতি দেয় <button>হিসেবে <menuitem>থাকাকালীন এখনও এটি স্কেলিং।

[data-command]::before {
    content: '';
    position: absolute;
    background-image: url("images/sprite.svgz");
    background-repeat: no-repeat;
    background-size: cover;
}

button[data-command]::before {
  width: 32px;
  height: 32px;
}

menuitem[data-command]::before {
  width: 24px;
  height: 24px;
}

[data-command="cancel"]::before {
  background-position: 0% 35%;
}

[data-command="logoff"]::before {
  background-position: 0% 37.5%;
}

অন্যদের পরামর্শ অনুসারে ব্যাকগ্রাউন্ড-আকারের তুলনায় ব্যাকগ্রাউন্ড-পজিশনে শতকরা (2 টি দশমিক স্থানে) ব্যবহার করে আপনি একই আইকন ঘোষণাকে কোনও আকারে স্কেল করতে পারবেন, এটিকে পুনরায় ঘোষণার প্রয়োজন ছাড়াই।

অবস্থান-y শতাংশ হ'ল মূল স্প্রাইট উচ্চতা / আইকন উচ্চতা% হিসাবে - আমাদের ক্ষেত্রে এখানে 80px * 100 / 3200px == প্রতিটি স্প্রাইট 2.5% এর y- অবস্থান দ্বারা প্রতিনিধিত্ব করে।

আপনার যদি হোভার / মাউসওভারের রাজ্য থাকে তবে আপনি স্প্রাইটের প্রস্থ দ্বিগুণ করতে পারেন এবং অবস্থান-এক্স স্থানাঙ্কে নির্দিষ্ট করতে পারেন।

এই পদ্ধতির অসুবিধা হ'ল পরবর্তী তারিখে আরও আইকন যুক্ত করা স্প্রাইটের উচ্চতা এবং তাই ওয়াই-পজিশন% পরিবর্তন করবে তবে আপনি যদি এটি না করেন তবে আপনার স্প্রাইট কো-অর্ডিনেটসগুলি আপনার প্রয়োজনীয় প্রতিটি স্কেল রেজোলিউশনের জন্য পরিবর্তন প্রয়োজন।

Answer 10

ভাল আমি মনে করি চিত্রগুলি স্কেল করার জন্য একটি সহজ সমাধান খুঁজে পেয়েছি: উদাহরণস্বরূপ - বলতে পারি যে এখানে 3 টি সমান আকারের স্প্রাইট রয়েছে যা আপনি ব্যবহার করতে চান, চিত্রটি স্কেল করতে সিএসএস ব্যবহার করুন

background-size : 300% 100%;

এবং তারপরে কাস্টম উচ্চতা এবং প্রস্থ নির্দিষ্ট করুন যা আপনার এইচটিএমএল উপাদান প্রয়োগ করতে হবে যেমন:

 width :45%;
 height:100px;

একটি নমুনা কোডটি এর মতো দেখতে হবে:

.customclass {
    background: url("/sample/whatever.png") 0 0 no-repeat ;
    background-size : 300% 100%;
    width :45%;
    height:100px;
}

আমি সিএসএসে বেশ নতুন, এবং স্টাইলিং এটি আমার পক্ষে সবচেয়ে ভাল জায়গা নয় এটি এটি করার একটি ভুল উপায় হতে পারে .. তবে এটি আমার জন্য ফায়ারফক্স / ক্রোম / এক্সপ্লোরার 10 এ কাজ করেছে, আশা করি এটি পুরানো সংস্করণগুলিতেও কাজ করে ..

Answer 11

স্কেলিং থেকে বিনামূল্যে স্থান ক্ষতিপূরণ করতে ম্যাচটি ব্যবহার করুন transform: scale(...);এবং যুক্ত করুন margin: -...px। (আপনি * {outline: 1px solid}উপাদান সীমানা দেখতে ব্যবহার করতে পারেন)।

Answer 12

2018 এখানে। শতাংশ সহ পটভূমি-আকার ব্যবহার করুন।

শিট:

এটি sprites একক সারি ধরে। আপনার শীটের প্রস্থ এমন একটি সংখ্যা হওয়া উচিত যা এক স্প্রাইটের 100 + প্রস্থ দ্বারা সমানভাবে বিভাজ্য । আপনার যদি 30 স্প্রাইট রয়েছে যা 108x108 পিক্স, তবে চূড়ান্ত প্রস্থ 5508px (50 * 108 + 108) করতে শেষে অতিরিক্ত ফাঁকা স্থান যুক্ত করুন।

সিএসএস:

.icon{
    height: 30px;  /* Set this to anything. It will scale. */
    width: 30px; /* Match height. This assumes square sprites. */
    background:url(<mysheeturl>);
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

/* Each image increases by 2% because we used 50+1 sprites. 
   If we had used 20+1 sprites then % increase would be 5%. */

.first_image{
    background-position: 0% 0;
}

.ninth_image{
    background-position: 16% 0; /* (9-1) x 2 = 16 */
}

এইচটিএমএল:

<div class ="icon first_image"></div>
<div class ="icon ninth_image"></div>

Answer 13

transform: scale(0.8);0.8 এর পরিবর্তে আপনার প্রয়োজনীয় মানটি ব্যবহার করুন

Answer 14

স্প্রাইট চিত্রের মোড়কের উপাদানটির প্রস্থ এবং উচ্চতা নির্ধারণ করুন। এই সিএসএস ব্যবহার করুন।

{
    background-size: cover;
}

Comments

কেন এটিকে নিচে ভোট দেওয়া হয়েছে তা আমি বুঝতে পারি না। আমার জন্য কাজ করেছেন। উত্তর হিসাবে আমার পদ্ধতি পোস্ট করবে।

— ক্রিস

আমি এখানে খ্রিস্টের সাথে একমত এটি আমার ক্ষেত্রেও সমস্যার সমাধান করে। নিশ্চিত নয় কেন এটি ডাউনভোটেড!

— শেলজিরো

এটি স্প্রাইটের সাথে কাজ করে না (প্রশ্নের শিরোনামটি দেখুন), এই কারণেই এই সমাধানটি নিম্নচোটিত।

— ডিমকো দেশু

Answer 15

সহজ ... স্প্রাইটের শীটে বিভিন্ন স্কেল সহ একই চিত্রের দুটি অনুলিপি ব্যবহার করা হচ্ছে। অ্যাপ্লিকেশনটির যুক্তিতে কর্ডস এবং আকার নির্ধারণ করুন।