কীভাবে স্বয়ংক্রিয়ভাবে ক্রপ করবেন এবং একটি চিত্র কেন্দ্রে রাখবেন

Question

যেকোন যথেচ্ছ ইমেজ দেওয়া, আমি চিত্রের কেন্দ্র থেকে একটি বর্গক্ষেত্র কাটাতে এবং নির্দিষ্ট বর্গের মধ্যে প্রদর্শন করতে চাই।

এই প্রশ্নটির অনুরূপ: সিএসএস একটি চিত্র পুনরায় আকার এবং শস্যযুক্ত প্রদর্শন করুন তবে আমি চিত্রটির আকার জানি না তাই আমি সেট মার্জিনগুলি ব্যবহার করতে পারি না।

Comments

উপাদানটি অবশ্যই একটি চিত্র ট্যাগ হওয়া উচিত, বা এটি কোনও পটভূমি-চিত্রের সম্পত্তি সহ একটি ডিভ হতে পারে?

— রাশ ফেরি

যতক্ষণ আমি আমার টেম্প্লেটিং সিস্টেমের মাধ্যমে চিত্রটি সেট করতে পারি ততক্ষণ তাতে কিছু আসে যায় না। কদর্য ধরনের, কিন্তু আমার ধারণা ইনলাইন শৈলীগুলি কার্যকর হবে।

— জোনাথন ওং

Answer 1

একটি সমাধান হ'ল ক্রপযুক্ত মাত্রাগুলি আকারের কোনও উপাদানগুলির মধ্যে কেন্দ্রীভূত একটি পটভূমি চিত্র ব্যবহার করা।

---

বেসিক উদাহরণ

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

---

imgট্যাগ সহ উদাহরণ

এই সংস্করণটি imgট্যাগটি ধরে রেখেছে যাতে আমরা ছবিটি সংরক্ষণ করতে টানতে বা ডান-ক্লিকের ক্ষমতা হারাতে না পারি। অস্বচ্ছতা ট্রিকের জন্য পার্কার বেনেটকে ক্রেডিট ।

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

---

object-fit/-position

সমর্থিত ব্রাউজারগুলি দেখুন ।

সিএসএস 3 চিত্র স্পেসিফিকেশন সংজ্ঞায়িত object-fitএবং object-positionবৈশিষ্ট্য যা একসঙ্গে স্কেল উপরে আরো ভাল নিয়ন্ত্রণ এবং ইমেজ বিষয়বস্তুর পদের জন্য অনুমতি দেয় imgউপাদান। এগুলির দ্বারা, কাঙ্ক্ষিত প্রভাব অর্জন করা সম্ভব হবে:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="http://placehold.it/200x200" />

Comments

background-size: cover;আসল আকৃতি অনুপাত বজায় রেখে আপনি চিত্রটি সঙ্কুচিত করতে বা যথাযথভাবে ডিভটি পূরণ করতে ব্যবহার করতে পারেন ।

— নিক

ব্যাকগ্রাউন্ড-ইমেজ ব্যবহার করার সময় আপনার পটভূমি-আকার যুক্ত করা উচিত: সঠিকভাবে কাটা ছবিটির আকারটি কভার করুন: jsfiddle.net/bw6ct

— ক্রিস এরিকসন

আমাকে বলা হয়েছে nowdays গুগল স্বচ্ছ ও গোপন চিত্র সম্পর্কে জানে যে, তাই imgএর altপিপীলিকা titleবৈশিষ্ট্যাবলী আপনার এসইও জন্য হারিয়ে যাবে।

— ভিক্টর সার্জিইঙ্কো

ওয়েবকিটে আপনি object-fit: cover;সরাসরি ইমগ ট্যাগেও ব্যবহার করতে পারেন যা কিছুটা বেশি শব্দার্থক মনে হয়।

— বেন

আমি অবজেক্ট-ফিট ব্যবহার করেছি: দিক অনুপাতটি না হারানোর, বর্গক্ষেত্রটি covering

— েকে দেওয়া

Answer 2

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

CSS সহ ফসলের থাম্বনেইলে লক্ষ্য অর্জনের জন্য আমি এই দুর্দান্ত উপায়টি পেয়েছি :

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

এটি @ নাথান রেডব্লুরের উত্তরের অনুরূপ তবে এটি প্রতিকৃতি চিত্রগুলির জন্যও মঞ্জুরি দেয়।

আমার জন্য একটি কবজ ভালো কাজ করে। .portraitক্লাসটি সেট করতে পোর্ট্রেট বা ল্যান্ডস্কেপ কিনা তা এই চিত্রটি সম্পর্কে আপনার কেবল একমাত্র জিনিসটি জানতে হবে যাতে এই অংশটির জন্য আমাকে কিছুটা জাভাস্ক্রিপ্ট ব্যবহার করতে হয়েছিল।

Comments

কেবল সচেতন থাকুন যে সিএসএস রূপান্তরগুলি কেবলমাত্র 9 9 বা তার উপরের ক্ষেত্রে উপলব্ধ।

— সাইমন পূর্ব

এই উত্তর হওয়া উচিত।

— ওয়েস মোডগুলি

ওপি বলেছিল "স্বেচ্ছাসেবক চিত্র" তাই ছবিটি প্রশস্তের চেয়ে লম্বা হলে আপ-ফ্রন্টটি জানত না।

— অপটেট করুন

আপনি যদি ন্যূনতম উচ্চতা রাখেন: 100%; মিনিট প্রস্থ: 100%; উচ্চতার পরিবর্তে: 100%; প্রস্থ: অটো; আপনার img.portrait ক্লাসের দরকার নেই।

— ব্যবহারকারী570605

@ ব্যবহারকারী570605 পরামর্শের সাথে মিলিত সেরা সমাধান

— আলবেনেক্স

Answer 3

এটি ব্যবহার করে দেখুন: আপনার চিত্রের ক্রপের মাত্রা সেট করুন এবং আপনার সিএসএসে এই লাইনটি ব্যবহার করুন:

object-fit: cover;

Comments

খুব ভাল সমর্থিত নয়: ক্যানিউজ.com / #feat=object-fit EDIT: আসলে, যথারীতি, এমএস ব্রাউজারগুলি এতে ব্যর্থ হয় ... এটি ব্যবহারের বেশ কিছু অংশের প্রতিনিধিত্ব করে: /

— ব্রায়ান এইচ।

এটি আমার যা প্রয়োজন ঠিক তা করেছে :)

— hcarreras

একমাত্র বহুল ব্যবহৃত ব্রাউজারগুলি যা এটি সমর্থন করে না তারা হ'ল ইন্টারনেট এক্সপ্লোরার 11 এবং এজ। আপনার শ্রোতার উপর নির্ভর করে, এখনই সমর্থন সম্ভবত প্রায় 85-90% এর কাছাকাছি, যা কিছু পরিস্থিতিতে এটি কার্যকর করতে পারে।

— বলবান

রাজা! দুর্দান্ত সমাধান !!

— Itzhar

এটি সম্পর্কে একটি ভাল টিউটোরিয়াল: मध्यम.com

— পিট্রো লা গ্রোটা

Answer 4

imgট্যাগ সহ উদাহরণস্বরূপ তবে ছাড়াইbackground-image

এই সমাধানটি imgট্যাগটি ধরে রাখে যাতে আমরা চিত্রটি সংরক্ষণ করতে টানতে বা ডান-ক্লিক করার ক্ষমতাটি হারাতে পারি না তবে background-imageকেবল কেন্দ্র এবং সিএসএসের সাহায্যে ক্রপ না করে।

খুব হাইট ইমেজ বাদে দিক অনুপাত সূক্ষ্ম বজায় রাখুন। (লিঙ্কটি পরীক্ষা করুন)

(কর্মে দেখুন)

মার্কআপ

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

সিএসএস

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

Comments

এটি ব্যবহার করে দেখুন ... যদি চিত্রটি কেন্দ্রের ধারক থেকে ছোট হয় তবে অন্যথায় এটি jsfiddle.net/3ts4rm24/1 কাটবে

— KnF

Answer 5

আমি @ রাশ এবং @ অ্যালেক্সের উত্তরগুলি ব্যবহার করে একটি কৌণিক নির্দেশিকা তৈরি করেছি

2014 এবং এর বাইরেও আকর্ষণীয় হতে পারে: পি

এইচটিএমএল

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

JS

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

মজাদার লিঙ্ক

Comments

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

— ম্যারাণক্রুজ

ডাউনভোটার নয়, তবে এটি কোনও কৌণিক প্রশ্ন নয় এবং আপনার উত্তরটি অপ্রাসঙ্গিক। @pferdefleisch

— মাওবার্ন

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

— ম্যারাণক্রুজ

Answer 6

এটা চেষ্টা কর:

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

মনে রাখবেন widthএবং heightকেবল তখনই কাজ করবে যদি আপনার ডিওএম উপাদানটির লেআউট থাকে (একটি divবা একটির মতো একটি ব্লক প্রদর্শিত উপাদান img)। যদি এটি না হয় (উদাহরণস্বরূপ একটি স্প্যান), display: block;সিএসএস বিধিগুলিতে যুক্ত করুন। আপনার যদি সিএসএস ফাইলগুলিতে অ্যাক্সেস না থাকে তবে উপাদানগুলিতে শৈলীর ইনলাইন ফেলে দিন।

Comments

বেশিরভাগ ক্ষেত্রেই, এই সিএসএসটি বিভিন্ন চিত্র সহ বারবার ব্যবহৃত হয়। অতএব, পটভূমির চিত্রটি ইনলাইন সেট করা অনিবার্য।

— র‌্যাটার

Answer 7

আপনি কেন্দ্রে চিত্র কাটতে পারেন এমন আরও একটি উপায় রয়েছে:

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

আপনার কেবলমাত্র প্রয়োজনটি হবে উল্লম্ব চিত্রগুলিতে ক্লাস "উল্লম্ব" যুক্ত করা, আপনি এই কোডটি দিয়ে এটি করতে পারেন:

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

দ্রষ্টব্য: "গুরুত্বপূর্ণ!" Img ট্যাগে সম্ভাব্য প্রস্থ, উচ্চতা বৈশিষ্ট্যগুলি ওভাররাইড করতে ব্যবহৃত হয়।