সিএসএস ইমেজ নিজেই শতাংশ পরিবর্তন?

109

আমি নিজেই একটি শতাংশের সাথে ইমগের আকার পরিবর্তন করার চেষ্টা করছি। উদাহরণস্বরূপ, আমি কেবল চিত্রটি অর্ধেক 50% এ আকার দিয়ে সঙ্কুচিত করতে চাই। তবে প্রয়োগ width: 50%;করলে চিত্রটি আকার পরিবর্তন করবে কনটেইনার উপাদানটির 50% (প্যারেন্ট উপাদান যা সম্ভবত <body>উদাহরণস্বরূপ)।

প্রশ্নটি হ'ল আমি কি জাভাস্ক্রিপ্ট বা সার্ভার সাইড ব্যবহার না করেই শতকরা একটি ভাগের সাথে চিত্রটির আকার পরিবর্তন করতে পারি? (আমার কাছে চিত্রের আকারের কোনও সরাসরি তথ্য নেই)

আমি নিশ্চিত যে আপনি এটি করতে পারবেন না তবে আমি কেবল দেখতে চাই বুদ্ধিমান সিএসএসের কেবলমাত্র সমাধান রয়েছে। ধন্যবাদ!

html css image

— মিন মিং লো
সূত্র

আপনি যদি এটি ব্যবহার করেন তবে এটি ধারণকারী উপাদানটির শতাংশ গ্রহণ করবে width: <number>%। আমি মনে করি না এটি করার কোনও উপায় আছে!

— অনিকেত

111

আমি আপনার জন্য 2 পদ্ধতি আছে।

পদ্ধতি 1. জেএসফিডেলে ডেমো

এই পদ্ধতিটি কেবল চিত্রের আকার পরিবর্তন করে কেবলমাত্র DOM এর আসল মাত্রা নয়, এবং আকারের পরে ভিজ্যুয়াল অবস্থা মূল আকারের মাঝখানে থাকে।

এইচটিএমএল:

<img class="fake" src="example.png" />

CSS:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

ব্রাউজার সমর্থন নোট: ব্রাউজারের পরিসংখ্যান ইনলাইন দেখিয়েছেcss।

পদ্ধতি 2. জেএসফিডেলে ডেমো

এইচটিএমএল:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

CSS:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}

দ্রষ্টব্য: img.normal এবংimg.fakeএকই চিত্র।
ব্রাউজার সমর্থন নোট: এই পদ্ধতিটি সমস্ত ব্রাউজারগুলিতে কাজ করবে, কারণ সমস্ত ব্রাউজারগুলিcssপদ্ধতিতে ব্যবহৃত বৈশিষ্ট্যগুলিকেসমর্থনকরে।

পদ্ধতিটি এইভাবে কাজ করে:

#wrap এবং #wrap img.fake প্রবাহ আছে
#wrap হয়েছে overflow: hidden যাতে তার মাত্রা ভেতরের চিত্র অভিন্ন ( img.fake)
img.fake ভিতরে একমাত্র উপাদান #wrapabsoluteঅবস্থান ছাড়াই যাতে এটি দ্বিতীয় ধাপটি না ভাঙে
#img_wrapহয়েছে absoluteপজিশনিং ভিতরে#wrap এবং সমগ্র উপাদানে আকার প্রসারিত ( #wrap)
চতুর্থ ধাপের ফলাফল এটি #img_wrap চিত্রের মতো একই মাত্রা রয়েছে।
সেটিং দ্বারা width: 50%উপর img.normal, তার আকার 50%এর #img_wrap, সেইজন্য এবং 50%প্রকৃত চিত্র আকার।

— ভ্লাদিমির স্টারকভ
সূত্র

এটি চিত্রটির মূল আকারের 50% আকারে পরিবর্তন করবে না, এটি এখন img_wrap এর পিতামাতার 50% ..

— ওয়েসলি

সমস্যা সমাধানের চেষ্টার জন্য আমার আপডেট হওয়া উত্তরটি দেখুন। আপনি কি মনে করেন?

— ওয়েসলি

আমি মনে করি প্রদর্শন ব্যবহার করা সম্ভব হবে: আমার কোডের মতো দৃশ্যমানতার পরিবর্তে কোনওটিই নয়। আপনার উদাহরণস্বরূপ, জাল লুকানো চিত্রের জন্য স্থানটি এখনও 'সংরক্ষিত' রয়েছে যা আপনি যদি এর চারপাশে সামগ্রী রাখেন তবে প্রবাহকে স্ক্রু করে দেয়

— ওয়েসলি

এটি অসম্ভব, কারণ মূল কৌশলটি দুটি নেস্টেড এবং ভাসমান ট্যাগগুলিতে।

— ভ্লাদিমির স্টারকভ

1

যদিও transform:scale()সমাধানটিতে একটি বড় সমস্যা রয়েছে। এটি সিএসএস বক্স মডেলের সাথে ভাল ইন্টারঅ্যাক্ট করে না। এই বার্তার মাধ্যমে আমি বলতে চাচ্ছি যে এটা সাথে ইন্টারঅ্যাক্ট না এ সব , তাই আপনি বিন্যাস যা সব ভুল দেখায় পেতে। দেখুন: jsfiddle.net/kahen/sGEkt/8

— কাহেন

46

এইচটিএমএল:

<span>
    <img src="example.png"/>
</span>

সিএসএস:

span {
    display: inline-block;
}
img {
    width: 50%;
}

এটি ধারক উপাদান পদ্ধতির ব্যবহার করে সবচেয়ে সহজ সমাধান হতে পারে।

ধারক উপাদান পদ্ধতির ব্যবহার করার সময়, এই প্রশ্নের একটি পরিবর্তন হয় এই প্রশ্নের । কৌশলটি হ'ল কনটেইনার উপাদানটি শিশু চিত্রটিকে সঙ্কুচিত করতে দেবে, সুতরাং এটির সাইজটি আনসাইড করা চিত্রের সমান হবে। সুতরাং, widthশতাংশের মান হিসাবে চিত্রের সম্পত্তি সেট করার সময় , চিত্রটি তার মূল স্কেলের সাথে তুলনামূলকভাবে মাপানো হয়।

অন্যান্য shrinkwrapping-সক্রিয় বৈশিষ্ট্য এবং সম্পত্তি মান মধ্যে কয়েকটি হল: float: left/right, position: fixedএবং min/max-width, যেমন লিঙ্ক প্রশ্নে আপনাকে উল্লেখ করেছে। প্রত্যেকের নিজস্ব পার্শ্ব-প্রতিক্রিয়া রয়েছে তবে display: inline-blockএটি নিরাপদ পছন্দ হবে। ম্যাট উল্লেখ করেছেনfloat: left/right তার উত্তরে , তবে তিনি এটিকে ভুলভাবে দায়ী করেছেন overflow: hidden।

জেসফিডেলে ডেমো

সম্পাদনা: ট্রোজান দ্বারা উল্লিখিত হিসাবে , আপনি নতুনভাবে চালু হওয়া CSS3 অন্তর্নিহিত এবং বহির্মুখী আকারের মডিউলটির সুবিধাও নিতে পারেন :

এইচটিএমএল:

<figure>
    <img src="example.png"/>
</figure>

সিএসএস:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

যাইহোক, সমস্ত জনপ্রিয় ব্রাউজার সংস্করণ লেখার সময় এটি সমর্থন করে না ।

— সম্প্রদায়
সূত্র

@ যে কেউ স্প্যান সীমানা ভেঙে না ফিক্স কিভাবে করবেন? ফ্রিডল

— সিওআর

এটি কেবল আমার প্রয়োজন ছিল ... দ্রুত এবং সাধারণ কিছু, ধন্যবাদ। আমি এটি এর মতো ব্যবহার করেছি: এইচটিএমএল: <img src="https://www.google.com/images/srpr/logo11w.png"/> সিএসএস: img { display: inline-block; width: 15%; }

— চ্নিককি

ভবিষ্যতে পাঠকদের জন্য: সেট সঠিক মান figureহয় width: fit-content;এখন হিসাবে। ব্রাউজার সমর্থন আজও অনেক ভাল।

— ডানিয়েল কিস-নাগি

12

zoomসম্পত্তি চেষ্টা করুন

<img src="..." style="zoom: 0.5" />

সম্পাদনা করুন: দৃশ্যত, ফায়ারফক্স zoomসম্পত্তি সমর্থন করে না । আপনার ব্যবহার করা উচিত;

-moz-transform: scale(0.5);

ফায়ারফক্সের জন্য

— আমির আকায়ডন
সূত্র

4

"জুম" এর মতো কোনও সিএসএস সম্পত্তি নেই এবং এটি আইই ছাড়া অন্য কারও দ্বারা সমর্থিত নয়। এটি মাইক্রোসফ্টের মালিকানাধীন জিনিস এবং মানহীন।

— রব

9

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

— আমির আকায়ডন

এই লিঙ্ক অনুসারে, অপেরা মনে হয় জুমকেও সমর্থন করবে। ফায়ারফক্স একমাত্র যা সমর্থন করে না। ফিক্স- css.com/2011/05/css-zoom

— আমির আকায়ডন

2

এজন্য আইই গত 8 বছরে বাজারের অর্ধেক অংশ হারিয়েছে। আপনি যদি কিছু সমর্থন করার জন্য নির্ভরযোগ্যভাবে ব্রাউজারগুলিতে বিশ্বাস করতে না পারেন তবে আপনার কোনও সাধারণ ভিত্তি নেই। চ্যানেলটি ব্রাউজার বিক্রেতারা নিজেরাই লিখেছেন। যদি তারা এটি সেখানে না রাখে তবে তার উপর নির্ভর করবেন না বা আপনি যেমন করেছেন তার মতো একাধিক মার্কআপ লিখে রাখবেন। এটি আবার 1998 নয়।

— রব

1

আপনি খেয়াল করেছেন কিনা তা আমি জানি না তবে ইন্টারনেট এক্সপ্লোরার, ক্রোম, সাফারি এবং অপেরা দ্বারা "জুম" সমর্থিত। এটিই প্রমাণ যে "জুম" বিক্রেতার নির্দিষ্ট নয়। শুধুমাত্র ফায়ারফক্সের মধ্যে পার্থক্য রয়েছে। সুতরাং আমি আমার প্রশ্ন পুনরাবৃত্তি। কমপিটেবল সিএসএস সম্পত্তি সহ পরিষ্কার সমাধান কী? আমার উত্তর হ'ল সর্বোত্তম উত্তর হ'ল যতক্ষণ না কেউ সঠিক মানক সমাধান পান।

— আমির আকায়ডন

5

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

<img srcset="example.png 2x">

srcবৈশিষ্ট্যটি প্রয়োজনীয় বলে এটি বৈধ হবে না তবে এটি কাজ করে (IE এর কোনও সংস্করণ বাদে কারণ srcsetসমর্থিত নয়)।

— benface
সূত্র

2

এটি আসলে সম্ভব এবং আমার প্রথম বৃহত আকারের প্রতিক্রিয়াশীল ডিজাইন সাইট ডিজাইনের সময় আমি দুর্ঘটনার দ্বারা কতটা আবিষ্কার করেছি।

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

ওভারফ্লো: লুকানো ক্লিয়ারফিক্স হ্যাক ব্যবহার না করে ভাসমান সামগ্রী থাকা সত্ত্বেও মোড়কে উচ্চতা এবং প্রস্থ দেয়। তারপরে আপনি মার্জিনগুলি ব্যবহার করে আপনার সামগ্রীতে অবস্থান করতে পারেন। এমনকি মোড়ক ডিভিও একটি ইনলাইন-ব্লক করতে পারেন।

— ঔজ্বল্যহীন
সূত্র

2

এটি একটি খুব পুরানো থ্রেড তবে স্ট্যান্ডার্ড রেজোলিউশন ডিসপ্লেতে রেটিনা (উচ্চ রেজাল্ট) স্ক্রিন ক্যাপচার প্রদর্শনের একটি সহজ সমাধান অনুসন্ধান করার সময় আমি এটি খুঁজে পেয়েছি।

সুতরাং আধুনিক ব্রাউজারগুলির জন্য কেবলমাত্র একটি HTML সমাধান রয়েছে:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

এটি ব্রাউজারকে জানিয়ে দিচ্ছে যে চিত্রটি এর আকারের চেয়ে দ্বিগুণ আকারের প্রদর্শন আকারের চেয়ে বেশি। মানটি সমানুপাতিক এবং চিত্রটির আসল আকার প্রতিফলিত করার প্রয়োজন নেই। একই প্রভাব অর্জন করতে কেউ 2w 1px ব্যবহার করতে পারে। Src বৈশিষ্ট্যটি কেবলমাত্র লিগ্যাসি ব্রাউজারগুলির দ্বারা ব্যবহৃত হয়।

এর দুর্দান্ত প্রভাবটি হ'ল এটি একই আকারটি রেটিনা বা স্ট্যান্ডার্ড ডিসপ্লেতে প্রদর্শন করে, এটি পরে সংকুচিত হয়।

— Max_B
সূত্র

0

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

এই সমাধানটি js এবং jquery ব্যবহার করে এবং পিতামাতার উপর ভিত্তি করে কেবল চিত্রের বৈশিষ্ট্যের ভিত্তিতে আকার পরিবর্তন করে। এটি ক্লাস এবং আইডি প্যারামিটার ব্যবহার করে একটি একক চিত্র বা একটি গোষ্ঠী পুনরায় আকার দিতে পারে।

আরও তথ্যের জন্য, এখানে যান: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

— জেনি ভ্যালন
সূত্র

0

এটি একটি কঠোর পদ্ধতির নয়:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

— nickthehero
সূত্র

0

আসলে এখানে বেশিরভাগ উত্তরই চিত্রটিকে নিজের প্রস্থে স্কেল করে না ।

আমাদের ওপেনের প্রস্থ এবং উচ্চতা থাকা দরকার img নিজেই উপাদানটির উপরের যাতে আমরা এটির মূল আকারটি দিয়ে শুরু করতে পারি।

এর পরে একটি ধারক উপাদান আমাদের জন্য চিত্রটি স্কেল করতে পারে।

সাধারণ এইচটিএমএল উদাহরণ:

<figure>
    <img src="your-image@2x.png" />
</figure>

এবং এখানে সিএসএস বিধি রয়েছে। আমি এই ক্ষেত্রে একটি নিখুঁত ধারক ব্যবহার করি:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

আপনি যেমন নিয়মাবলী সঙ্গে ইমেজ অবস্থান সামঞ্জস্য করতে পারে transform: translate(0%, -50%);।

— Floris
সূত্র

-1

আমি মনে করি আপনি ঠিক বলেছেন, যতদূর আমি জানি (খালি ক্রস ব্রাউজার নয়) খাঁটি সিএসএস দিয়ে এটি সম্ভব নয়।

সম্পাদনা:

ঠিক আছে আমি আমার উত্তরটি খুব পছন্দ করি না তাই আমি কিছুটা হতবাক হয়ে গেলাম। আমি একটি আকর্ষণীয় ধারণা পেয়েছি যা সাহায্য করতে পারে .. সম্ভবত এটি সর্বোপরি সম্ভব (যদিও এটি এখনও সবচেয়ে সুন্দর জিনিস নয়):

সম্পাদনা: পরীক্ষিত এবং ক্রোম, এফএফ এবং আইই 8 এবং 9 এ কাজ করছে। । এটি আই 7 তে কাজ করে না।

jsFood উদাহরণ এখানে

এইচটিএমএল:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

CSS:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

— ওয়েসলি
সূত্র

আপনার উদাহরণ চিত্রের আকার পরিবর্তন করুন আনুপাতিকভাবে নয়

— ভ্লাদিমির স্টারকভ

আপনার পদ্ধতি উইন্ডো পুনরায় আকারের মাধ্যমে চিত্র হ্রাস করা সম্ভব করে

— ভ্লাদিমির স্টারকভ

এটি কারণ আপনি ব্যবহার করছেন inline-block, এজন্য প্রস্থটি #img_wrapকেবলমাত্র অভ্যন্তরীণ এইচটিএমএল প্রস্থকেই নয়, প্রসঙ্গের ধারক প্রস্থের উপরও নির্ভর করে।

— ভ্লাদিমির স্টারকভ

আমি যতদূর বলতে পারি, এই প্রদর্শন: কোনও চিত্রই কিছু করে না এবং মুছে ফেলা যায় না। নাকি আমি কিছু মিস করছি?

— কাঁপানো