সিএসএস একটি চিত্র পুনরায় আকার এবং ক্রপযুক্ত প্রদর্শন করুন

Question

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

আমি এইচটিএমএল imgসম্পত্তি দিয়ে আকার পরিবর্তন করতে পারি এবং আমি এটি দিয়ে কাটাতে পারি background-image।
আমি দুজনে কীভাবে পারি?

উদাহরণ:

এই ছবিটি:

আকারের 800x600পিক্সেল রয়েছে এবং আমি 200x100পিক্সেলের চিত্রের মতো দেখতে চাই

এর সাথে imgআমি চিত্রটির আকার পরিবর্তন করতে পারি 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

এটি আমাকে দেয়:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

এবং এর সাহায্যে background-imageআমি চিত্র 200x100পিক্সেল কাটাতে পারি ।

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

আমাকে দেয়:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

আমি দুজনে কীভাবে পারি?
চিত্রটি পুনরায় আকার দিন এবং তারপরে এটির আকারটি কাটতে চান?

Answer 1

আপনি উভয় পদ্ধতির সমন্বয় যেমন ব্যবহার করতে পারেন।

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

এর marginমধ্যে চিত্রটি সরিয়ে নিতে আপনি নেতিবাচক ব্যবহার করতে পারেন <div/>।

Comments

মনে রাখবেন যে আপনি যদি অবস্থান নির্ধারণ করেন: অন্তর্ভুক্ত চিত্রটির তুলনায় আপনার অবস্থান নির্ধারণ করা দরকার: ধারণকৃত ডিভের সাথে আপেক্ষিক। যদি আপনি এটি না করেন, আমি খুঁজে পেয়েছি যে আইই আসলে চিত্রটি ক্লিপ করবেন না।

— ফ্র্যাঙ্ক শুইটারম্যান

.ক্রপ ইমগ ক্লাস থেকে উচ্চতাও সরিয়ে ফেলুন

— ওয়াকার আলমগীর

@ ওয়াকার-আলমগীর আপনি উচ্চতার ঘোষণাটি সরিয়ে দিলে এটি কার্যকর হবে না

— রোবরউর্ক

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

— জে-রু

অন্যদের জন্য কেবল একটি নোট: ক্রপ উচ্চতা এবং প্রস্থটি চিত্রের নীচে-সর্বাধিক এবং ডান-অংশের অংশটি কোথায় স্লাইস করতে হবে তা নির্ধারণ করে। .crop img উচ্চতা এবং প্রস্থ চিত্রটি স্কেল করবে। .crop img মার্জিন চিত্রটি প্যান করবে

— ফ্রেডেরিক

Answer 2

সিএসএস 3 এর background-imageসাথে একসাথে background-sizeউভয় লক্ষ্য পূরণ করে এর সাথে আকার পরিবর্তন করা সম্ভব ।

আছে উদাহরণ একটি গুচ্ছ উপর css3.info ।

Donald_duck_4.jpg ব্যবহার করে আপনার উদাহরণের ভিত্তিতে প্রয়োগ করা হয়েছে । এই ক্ষেত্রে, background-size: cover;আপনি যা চান তা ঠিক - এটি ধারণের background-imageপুরো অঞ্চলটি cover াকতে ফিট করে <div>এবং অতিরিক্ত (অনুপাতের উপর নির্ভর করে) ক্লিপ করে।

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.jpg');
  width: 200px;
  height: 100px;
  background-position: center;
  /* Make the background image cover the area of the <div>, and clip the excess */
  background-size: cover;
}

<div class="with-bg-size">Donald Duck!</div>

CSS3 পটভূমি চিত্র পটভূমি আকার

Comments

দুর্দান্ত সমাধান, তবে একটি সতর্কতা হ'ল এটি আই <9 এর সাথে সামঞ্জস্যপূর্ণ নয় (যদি এটি এখন কারও কাছে গুরুত্বপূর্ণ হয়)। এছাড়াও, আমি উল্লেখ করতে চেয়েছিলাম, যদি আপনি ব্যাকগ্রাউন্ড-আকারের কন্টেন্টগুলি সহ কভারটি প্রতিস্থাপন করেন তবে এটি স্কেল হবে তবে চিত্রটি ক্রপ হবে না।

— উত্সর্গ করা

জন্য <img />ট্যাগ, এ বর্ণন object-fit: coverএবং থেকে সম্পর্কিত মান সিএসএস ভাবমূর্তি মূল্যবোধ ও প্রতিস্থাপিত বিষয়বস্তু মডিউল স্তর 3 স্পেসিফিকেশন ।

— জোয়েল পুররা

Answer 3

আপনি এটি ব্যবহার করার চেষ্টা করেছেন?

.centered-and-cropped { object-fit: cover }

আমার ইমেজ, কেন্দ্র (উভয় উল্লম্ব এবং অনুভূমিকভাবে) এবং এটি ক্রপ করার চেয়ে পুনরায় আকার দেওয়া দরকার।

আমি খুশিতে খুশী হয়েছি, এটি একটি সিএসএস-লাইনে করা যেতে পারে। উদাহরণটি এখানে দেখুন: http://codepen.io/chrisnager/pen/azWWgr/?editors=110

---

এই উদাহরণ থেকে কোড CSSএবং HTMLকোড এখানে :

.centered-and-cropped { object-fit: cover }

<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
    
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200" 
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">

Comments

ধন্যবাদ, আমি মনে করি এটি সবচেয়ে সহজ এবং সর্বজনীন উপায় - তবে এটি IE এর সাথে কাজ করবে বলে মনে হচ্ছে না: / এখানে ডক্সটি সন্ধান করুন: developer.mozilla.org/de/docs/Web/CSS/object-

— মোজবোজ

CSS3 অবজেক্ট-ফিট IE11

— চোখের আশ্চর্য

@ চক্ষু-আশ্চর্য এটি শীঘ্রই প্রকাশিত হয় এজ 16 এ সমর্থিত। যদি এটির অ-সমালোচনা এবং অল্প

— রায় ফস

সিএসএস 3 এ, আমরা উভয় উপায়ে img + অবজেক্ট-ফিট বা ডিভ + ব্যাকগ্রাউন্ড-চিত্র চেষ্টা করতে পারি। এখনও পর্যন্ত আমার অভিজ্ঞতায় ব্যাকগ্রাউন্ড-চিত্রটি আরও শর্তের সাথে মানিয়ে নিতে ব্যবহৃত হতে পারে।

— এরিক 7

এখন পর্যন্ত এটি এজ দ্বারা সমর্থিত (কখন থেকে জানা নেই)।

— জেরাল্ড স্নাইডার

Answer 4

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

মূলত ওভারফ্লো লুকিয়ে চিত্রটি ক্রপ করে ডিভ যুক্ত থাকে।

Answer 5

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

Answer 6

ধন্যবাদ স্যানচেথফেট

আপনার উত্তরের আমি উন্নতি করেছি। যেহেতু প্রতিটি চিত্রের জন্য ক্রপটি খুব উপযোগী, তাই এই সংজ্ঞাগুলি CSS এর পরিবর্তে HTML এ হওয়া উচিত।

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

Answer 7

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

Answer 8

object-fitআপনি <img>ট্যাগের সাথে খেললে আপনাকে সহায়তা করতে পারে

নীচের কোডটি আপনার জন্য আপনার চিত্রটি ক্রপ করবে। আপনি অবজেক্ট-ফিট দিয়ে চারপাশে খেলতে পারেন

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

Comments

এটি আমার দিনটি তৈরি করেছে - আমি এটিকে সহজেই আমার স্লাইডার ক্যারোসেল বাস্তবায়নের স্লাইডের সাথে সংযুক্ত করতে পারি - প্লেইন আইএমজি অবজেক্ট সলিউশন এবং "স্লাইডার প্লাগইনের কোড বেস"

— -তে

এটি সিএসএসের সুবিধা :)

— হিদত রহমান

Answer 9

সরাসরি উদাহরণ: https://jsfiddle.net/de4Lt57z/

এইচটিএমএল:

<div class="crop">
  <img src="example.jpg" alt="..." />
</div>

সিএসএস:

    .crop img{
      width:400px;
      height:300px;
      position: absolute;
      clip: rect(0px,200px, 150px, 0px);
      }

ব্যাখ্যা: এখানে চিত্রটির প্রস্থ এবং উচ্চতার মান দ্বারা আকার পরিবর্তন করা হয়েছে। এবং ফসল ক্লিপ সম্পত্তি দ্বারা সম্পন্ন হয়।

সম্পর্কে ক্লিপ সম্পত্তি ফলো বিস্তারিত জানার জন্য: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/

Answer 10

ক্রপ শ্রেণিতে, আপনি প্রদর্শিত করতে চান চিত্রের আকারটি রাখুন:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

এইচটিএমএল দেখতে পাবেন:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

Answer 11

<p class="crop"><a href="http://templatica.com" title="Css Templates">
    <img src="img.jpg" alt="css template" /></a></p> 

---

.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
    position: relative; /* this is important too */
    border: 1px solid #ccc;
    width: 150px;
    height: 90px;
}
.crop img {
    position: absolute;
    top: -20px;
    left: -55px;
}

Answer 12

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

Answer 13

আমি যা করেছি তা হ'ল একটি সার্ভার সাইড স্ক্রিপ্ট তৈরি করা যা আকার পরিবর্তন করতে এবং সার্ভারের শেষে একটি চিত্র ক্রপ করে যাতে এটি আন্তঃস্বল্প জুড়ে কম ডেটা প্রেরণ করে।

এটি মোটামুটি তুচ্ছ, তবে যদি কেউ আগ্রহী হন তবে আমি কোডটি খনন করতে পারি এবং পোস্ট করতে পারি (এসপিএন)

Comments

সিজিআই সম্ভবত সর্বাধিক বহনযোগ্য পদ্ধতি (এবং ব্যান্ডউইথ-দক্ষ), যদি না ওপি জাভাস্ক্রিপ্টের মাধ্যমে ব্যবহারকারীকে নিজস্ব আকার পরিবর্তন এবং ক্রপিংয়ের অনুমতি দেয় না।

— স্ট্রেগার

Answer 14

আছে সেবা Filestack মত যে আপনার জন্য এটা করতে হবে।

তারা আপনার চিত্র url নেয় এবং ইউআরএল পরামিতি ব্যবহার করে আপনাকে এটির আকার পরিবর্তন করতে দেয়। এটা বেশ সহজ।

আপনার চিত্রটি 200x100 এর আকার পরিবর্তন করার পরে তবে অনুপাতের অনুপাতটি রেখে দেবে

পুরো ইউআরএলটি এমন দেখাচ্ছে

https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg

তবে গুরুত্বপূর্ণ অংশটি ঠিক

resize=width:200/crop=d:[0,25,200,100]

Comments

চমৎকার প্লাগ - তবে সমানভাবে - একটি দুর্দান্ত পরিষেবা (না, আমি এটি বলার জন্য অর্থ প্রদান করি না ;-)) - আমি আক্ষরিকভাবে সাইন আপ করেছি এবং এটি বেশ দুর্দান্ত

— জোনাথন লিয়ন

Answer 15

clip-pathসম্পত্তি ব্যবহার করার চেষ্টা করুন :

ক্লিপ-পাথ সম্পত্তি আপনাকে একটি মৌলিক আকার বা একটি এসভিজি উত্সতে একটি উপাদান ক্লিপ করতে দেয়।

দ্রষ্টব্য: ক্লিপ-পাথ সম্পত্তি হ্রাস করা ক্লিপ সম্পত্তিটি প্রতিস্থাপন করবে।

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

আরও উদাহরণ এখানে ।

Answer 16

<div class="crop">
    <img src="image.jpg"/>
</div>

.crop {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.crop img {
  width: 100%;
  /*Here you can use margins for accurate positioning of cropped image*/
}

Answer 17

আপনি যদি বুটস্ট্র্যাপ ব্যবহার { background-size: cover; }করছেন তবে <div>সম্ভবত ডিভকে একটি শ্রেণি বলুন <div class="example" style=url('../your_image.jpeg');>যাতে এটি হয়ে যায় usingdiv.example{ background-size: cover}

Answer 18

আমার সম্প্রতি এটি করা দরকার ছিল। আমি কোনও এনওএএ গ্রাফের একটি থাম্বনেইল-লিঙ্ক তৈরি করতে চেয়েছিলাম। যেহেতু তাদের গ্রাফ যে কোনও সময় পরিবর্তিত হতে পারে, তাই আমি চাইছিলাম যে আমার থাম্বনেইল এটির সাথে পরিবর্তিত হয়। তবে তাদের গ্রাফটিতে একটি সমস্যা রয়েছে: এটির শীর্ষে একটি বিশাল সাদা সীমানা রয়েছে, তাই আপনি যদি থাম্বনেইল তৈরি করতে কেবল এটি স্কেল করেন তবে আপনি দস্তাবেজের বহিরাগত সাদা স্থান দিয়ে শেষ করতে পারেন।

আমি কীভাবে এটি সমাধান করেছি তা এখানে:

http://sealevel.info/example_css_scale_and_crop.html

প্রথমে আমার কিছুটা পাটিগণিত করা দরকার ছিল। NOAA থেকে আসল চিত্রটি 960 × 720 পিক্সেল, তবে শীর্ষ সত্তর পিক্সেল একটি অতিরিক্ত অতিরিক্ত সাদা সীমান্ত অঞ্চল। শীর্ষে অতিরিক্ত সীমান্ত অঞ্চল ছাড়াই আমার একটি 348 × 172 থাম্বনেল দরকার। এর অর্থ মূল চিত্রটির কাঙ্ক্ষিত অংশটি 720 - 70 = 650 পিক্সেল উচ্চ। আমার এটি স্কেল করতে হবে 172 পিক্সেল, অর্থাৎ 172/650 = 26.5% এ। এর অর্থ দাঁড়ালো চিত্রের শীর্ষ থেকে মুছতে পিক্সেলের 70 = 19 সারি 26 26% এর প্রয়োজন।

তাই ...

1. উচ্চতা = 172 + 19 = 191 পিক্সেল সেট করুন:

   উচ্চতা = 191

2. নীচের মার্জিনকে -১৯ পিক্সেল সেট করুন (চিত্রটি সংক্ষিপ্ত করে 172 পিক্সেল উচ্চ):

   মার্জিন-নীচে: -19px

3. শীর্ষস্থানটি -১৯ পিক্সেল এ সেট করুন (চিত্রটি সরিয়ে নিয়ে যাওয়া, যাতে শীর্ষ 19 পিক্সেলের সারিগুলি ওভারফ্লো হয়ে যায় এবং নীচের দিকের পরিবর্তে লুকানো থাকে):

   শীর্ষ: -19px

ফলাফল HTML এটির মতো দেখাচ্ছে:

<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>

আপনি দেখতে পাচ্ছেন, আমি <a> ট্যাগযুক্ত স্টাইলটি বেছে নিয়েছি, তবে আপনি পরিবর্তে <ডিভ> স্টাইল করতে পারেন।

এই পদ্ধতির একটি নিদর্শন হ'ল যদি আপনি সীমাগুলি দেখান তবে উপরের সীমানাটি অনুপস্থিত হবে। যেহেতু আমি কোনওভাবেই সীমানা = 0 ব্যবহার করি, এটি আমার পক্ষে কোনও সমস্যা ছিল না।

Answer 19

আপনি কোডেমের চিত্র পুনরায় আকার পরিষেবা ব্যবহার করতে পারেন । আপনি কোনও পোস্ট কল দিয়ে যে কোনও চিত্রের আকার পরিবর্তন করতে পারেন। ব্রাউজারে আকস্মিকভাবে ব্যবহার করা যেতে পারে বা আপনার প্রোডাকশন অ্যাপ্লিকেশনটিতে ব্যবহার করা যেতে পারে।

• আপনার পছন্দের চিত্রটি আপলোড করুন (এস 3, ইমগুর ইত্যাদি)
• এটি আপনার উত্সর্গীকৃত API url এ প্লাগ করুন (আমাদের ড্যাশবোর্ড থেকে)