সিএসএসে আমি কোনও চিত্রের উচ্চতা পরিবর্তন করতে পারি: সিউডো-উপাদানগুলির আগে /: পরে?

Question

মনে করুন আমি কোনও চিত্র ব্যবহার করে নির্দিষ্ট ফাইলের লিঙ্কগুলি সাজাতে চাই। আমি আমার লিঙ্ক হিসাবে ঘোষণা করতে পারে

<a href='foo.pdf' class='pdflink'>A File!</a>

তারপরে সিএসএস পছন্দ করুন

.pdflink:after { content: url('/images/pdf.png') }

এখন, এটি pdf.pngআমার লিঙ্ক পাঠ্যের জন্য সঠিক আকার না হলে ব্যতীত এটি দুর্দান্ত কাজ করে ।

আমি :afterচিত্রটি স্কেল করতে ব্রাউজারকে বলতে সক্ষম হতে চাই , তবে আমি আমার জীবনের পক্ষে সঠিক বাক্য গঠন খুঁজে পাই না। বা এটি কি পটভূমির চিত্রগুলির মতো, যেখানে কেবল আকার পরিবর্তন করা সম্ভব নয়?

ইটিএ: আমি একটির দিকে ঝুঁকছি ক) উত্স চিত্রটি "ডান" আকার, সার্ভার-সাইড এবং / অথবা খ) আকার পরিবর্তন করে কেবল একটি আইএমজি ট্যাগ ইনলাইন সরবরাহ করতে মার্কআপ পরিবর্তন করে। আমি এই দুটি জিনিস এড়িয়ে চলার চেষ্টা করছিলাম তবে তারা মনে হয় সিএসএসের সাথে খাঁটি জিনিস করার চেয়ে তারা আরও উপযুক্ত হবে। আমার আসল প্রশ্নের উত্তরটি মনে হয় "আপনি কখনও কখনও এটি করতে পারেন "।

Comments

এমন কোন বাধ্যবাধকতা আছে যে আপনি 'চারপাশে মোড়ানো' একটি ট্যাগ দিয়ে 'আইএমজি' ট্যাগ ব্যবহার করছেন না? এটি এমন কোনও চিত্রের আরও সাধারণ বাক্য গঠন যা এটি একটি লিঙ্কও। আমি এটি বলছি কারণ আপনি যদি নিজের পদ্ধতিটি কাজ করার জন্য পান তবে আপনি অন্যান্য বিকাশকারীকে বিভ্রান্ত করতে পারেন। ব্রাউজার / সংস্করণগুলির মধ্যে অসঙ্গতির জন্য সিএসএসেরও শক্তিশালী খ্যাতি রয়েছে।

— 23'12 এ পরিবেশন করুন

আমি বিষয়টিটির প্রশংসা করি, এটি ঠিক যে আমি প্রয়োজনীয়ভাবে মার্কআপ প্রজন্মকে নিয়ন্ত্রণ করি না - এই ক্ষেত্রে আমি কেবল পুনরায় স্টাইল করতে পারি, পুনর্গঠন করতে পারি না।

— কোডার

ডাব্লু

— প্রজাতন্ত্র

Answer 1

এর সামঞ্জস্য background-sizeঅনুমোদিত is তবে আপনাকে এখনও ব্লকের প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে হবে।

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

এমডিএন-এ সম্পূর্ণ সামঞ্জস্যতা সারণী দেখুন ।

Comments

এটি বেশিরভাগই যে আমাদের বেশিরভাগ ক্লায়েন্ট IE 7 বা 8 এ রয়েছে (কর্পোরেট ননসেন্স, দুঃখিত)।

— কোডার

যদি এটি হয় তবে আপনার ব্যবহার :afterকরা উচিত নয় । এটি IE8 এর নীচে সমর্থিত নয়।

— আনসেল সান্টোসা

এই কৌশলটি width: 10px; height: 20px;চিত্রটি দেখার জন্য সেটিংসেরও প্রয়োজন ।

— এখানে 21

এছাড়াও লক্ষ করুন যে এটি সত্যই কাজ করে, তবে কেবলমাত্র নির্দিষ্ট background-imageসম্পত্তি দিয়ে, সরল backgroundকাজ করবে না।

— গ্রুবার

(কারণ :before) আমারও দরকার ছিল position: absolute, এবং left: -10px।

— হুগো

Answer 2

নোট করুন যে :afterসিউডো-এলিমেন্টটি একটি বাক্স, যার ফলে উত্পন্ন চিত্র রয়েছে। চিত্রটি স্টাইল করার কোনও উপায় নেই তবে আপনি বাক্সটি স্টাইল করতে পারেন।

নিম্নলিখিতটি কেবল একটি ধারণা এবং উপরের সমাধানটি আরও ব্যবহারিক।

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

ত্রুটিগুলি: আপনাকে চিত্রটির অভ্যন্তরীণ মাত্রাগুলি জানতে হবে এবং এটি আপনাকে কিছু শ্বেত স্পেস সহ ছেড়ে দেয়, যা আমি এটিএম থেকে মুক্তি পেতে পারি না।

Comments

জুম: 0.5 এছাড়াও বিবেচ্য মূল্য।

— অ্যালেক্স

আমি এই সমাধানটির ধারণাটি পছন্দ করি, তবে এটি অবস্থানটি ছুঁড়ে দেয়, একটি ইনলাইন-ব্লক দৃশ্যে sp (আইই ১১)

— ক্রিস্টোফার ডেভিস

জুম ভাল সমর্থিত হয় না।

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

— রায়ান

কেবল একটি নোট: আমার ক্ষেত্রে, আমাকে আসলে কাজ position: absoluteকরার জন্য রেখে দিতে হয়েছিল transform: scale(0.5)। স্বতন্ত্রতার জন্য আমাকে position: relative"প্যারেন্ট" উপাদানটি ( :afterসিউডোর মালিক ) রাখতে হয়েছিল। এছাড়াও, translate(-16px, -16px)আমার ট্রান্সফর্মটিতে 16x16 আইকনটি সঠিকভাবে অবস্থানের জন্য যুক্ত করতে হয়েছিল। position: absoluteএছাড়াও হোয়াইটস্পেস সমস্যা দূর সুবিধা রয়েছে।

— ব্র্যাডেন সেরা

Answer 3

যেহেতু আমার অন্য উত্তরটি স্পষ্টতই ভালভাবে বোঝা যায় নি, তাই এখানে দ্বিতীয় চেষ্টা করা হয়েছে:

প্রশ্নের উত্তর দেওয়ার জন্য দুটি পন্থা রয়েছে।

প্রাকটিক্যাল (কেবল আমাকে দেবদেবীর ছবি দেখান!)

:afterসিউডো-সিলেক্টর সম্পর্কে ভুলে যান এবং এর মতো কোনও কিছুর জন্য যান

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

তত্ত্বীয়

প্রশ্নটি: আপনি উত্পন্ন সামগ্রীকে স্টাইল করতে পারবেন ? উত্তরটি: না, আপনি পারবেন না। এই বিষয়ে ডাব্লু 3 সি মেলিং তালিকায় দীর্ঘ আলোচনা হয়েছে , তবে এখন পর্যন্ত কোনও সমাধান হয়নি।

উত্পন্ন সামগ্রী একটি উত্পন্ন বাক্সে রেন্ডার করা হয় এবং আপনি সেই বাক্সটি স্টাইল করতে পারেন, তবে সামগ্রীটি তেমন নয় । বিভিন্ন ব্রাউজারগুলি খুব আলাদা আচরণ দেখায়

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

ক্রোম প্রথমটির আকার পরিবর্তন করে তবে দ্বিতীয়টির জন্য চিত্রটির অভ্যন্তরীণ মাত্রা ব্যবহার করে

ফায়ারফক্স এবং ie প্রথম সমর্থন করে না, এবং দ্বিতীয়টির জন্য অভ্যন্তরীণ মাত্রা ব্যবহার করে

অপেরা উভয় ক্ষেত্রেই অভ্যন্তরীণ মাত্রা ব্যবহার করে

( http://lists.w3.org/ আর্কাইভস / প্রজাতন্ত্র /www-style/2011 নভেম্বর/0451.html থেকে )

একইভাবে, ব্রাউজারগুলি http://jsfiddle.net/Nwupm/1/ এর মতো জিনিসগুলিতে খুব আলাদা ফলাফল দেখায় , যেখানে একাধিক উপাদান তৈরি করা হয়। মনে রাখবেন যে সিএসএস 3 এখনও প্রাথমিক বিকাশের পর্যায়ে রয়েছে এবং এই সমস্যাটির সমাধান এখনও হয়নি।

Comments

@ টিজে প্রতিটি পৃথক উত্তর একটি উত্তর প্রাপ্য (যদি তা যথেষ্ট স্পষ্ট না হয়), যা বিভিন্ন পরিমাণে আপভোট পাবে এবং উত্তরের বিষয়বস্তুর উপর ভিত্তি করে আলাদাভাবে দেখা / উদ্ধৃত / ভাগ করা হবে।

— টিমো হুভিনেন

Answer 4

আপনার চিত্রের পরিবর্তে পটভূমি ব্যবহার করা উচিত।

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

Answer 5

diplay: block; কোন প্রভাব আছে

পজিশনটি অদ্ভুত ভিত্তিগুলির সম্মুখভাগে খুব অদ্ভুতভাবে কাজ করে, তাই সাবধান হন

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

Answer 6

এখানে আরও একটি (কার্যক্ষম) সমাধান রয়েছে: আপনার ইমেজগুলিকে নিজের আকারের আকার পরিবর্তন করুন :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

এটির জন্য আপনার 20px * 10px হতে pdf.png প্রয়োজন। CSS এর 20px / 10px ব্লকের আকার দেওয়ার জন্য এখানে রয়েছে যাতে ব্লকের পরে আসা উপাদানগুলি সমস্ত চিত্রের সাথে বিভ্রান্ত না হয়

কাঁচা চিত্রটির একটি অনুলিপি তার মূল আকারে রাখতে ভুলবেন না

Comments

এটা কল জোকস !!

— এমডি আশিক

Answer 7

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}

Answer 8

আপনি zoomসম্পত্তি ব্যবহার করতে পারেন । পরীক্ষা করে দেখুন এই jsfiddle

Comments

জেসফিডেল চেক করা, উভয়ই একই আকার এবং জুমটি লাল রঙে হাইলাইট করা হয়েছে।

— রায়ান

এই মুহুর্তে এটি ফায়ারফক্স 53 এ পুনরায় আকার দেয় না। আশা করি, এটি ফায়ারফক্সের পরবর্তী সংস্করণে প্রয়োগ করা যেতে পারে। এটি কমপক্ষে ক্রোমে কাজ করে তা জেনে রাখা ভাল। :-)

— রায়ান 15

Answer 9

আপনি এর আগে বা পরে উপাদানগুলির উচ্চতা বা প্রস্থ পরিবর্তন করতে পারেন :

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

Answer 10

আমি এই ফন্টের আকার নিয়ন্ত্রণ প্রস্থ ব্যবহার করেছি

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

Answer 11

আজকাল ফ্লেক্সবক্সের সাহায্যে আপনি আপনার কোডটি খুব সহজ করতে পারবেন এবং প্রয়োজন অনুযায়ী কেবলমাত্র 1 টি প্যারামিটার সামঞ্জস্য করতে পারেন:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

এখন আপনি কেবলমাত্র উপাদানটির প্রস্থ সামঞ্জস্য করতে পারেন এবং উচ্চতাটি স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে পারে, তত্সর উচ্চতা আপনার প্রয়োজনীয় সংখ্যায় না হওয়া পর্যন্ত প্রস্থ বৃদ্ধি / হ্রাস করতে পারে is

Comments

আমার পক্ষে কাজ করেনি, কারণ চিত্রটি এসজিজি, কারণ পিতা বা মাতা একটি ফ্লেক্স ধারক।

— মিগুয়েল পাইতো

কোনও url(//placeimg.com/800/200/arch)

— জেপিজিতেও নেই

Answer 12

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;