CSS এর সাথে একটি স্কোয়ারে একটি আয়তক্ষেত্রাকার চিত্র "ক্রপ" কিভাবে করবেন?

Question

আমি জানি যে আসলে সিএসএস সহ কোনও চিত্র পরিবর্তন করা অসম্ভব, এজন্যই আমি শস্যকে উদ্ধৃতিতে রেখেছি।

আমি যা করতে চাই তা হচ্ছে আয়তক্ষেত্রাকার চিত্র নেওয়া এবং চিত্রটি একেবারেই বিকৃত না করে সেগুলি বর্গক্ষেত্র হিসাবে প্রদর্শিত করতে CSS ব্যবহার করুন।

আমি মূলত এটি চালু করতে চাই:

এটিতে:

Comments

এই চিত্রগুলি ডিভসের ব্যাকগ্রাউন্ডের চিত্রগুলি বা এসইও-র পক্ষে গুরুত্বপূর্ণ যে তারা <img> ট্যাগে থেকে যায়?

— মাইকেল

আপনি এখনও কিছু চেষ্টা করেছেন? এটি CSS3 background-positionবা overflow:hiddenঅপেক্ষাকৃত পজিশনিং সহ পুরানো মোড়ক ডিভ এবং চিত্রের সাথে বরং সহজ ।

— ফ্যাব্রিসিও মাত্তে

তারা নিশ্চিতভাবে পটভূমির চিত্র হতে পারে

— novicePrgrmr

আমার উত্তর দেখুন, আমি মনে করি এটি আপনার সামগ্রিক সেরা বিকল্প। এটি অবস্থানের উপাদানগুলি এড়িয়ে চলে।

— মাইকেল

Answer 1

ধরে নিই যে তাদের আইএমজি ট্যাগে থাকতে হবে না ...

এইচটিএমএল:

<div class="thumb1">
</div>

সিএসএস:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

সম্পাদনা: ডিভের কোথাও লিঙ্ক করার প্রয়োজন হলে ঠিক এইচটিএমএল এবং স্টাইলগুলি সামঞ্জস্য করুন:

এইচটিএমএল:

<div class="thumb1">
<a href="#">Link</a>
</div>

সিএসএস:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

নোট করুন এটিকে প্রতিক্রিয়াশীল হিসাবে সংশোধন করা যেতে পারে, উদাহরণস্বরূপ% প্রস্থ এবং উচ্চতা ইত্যাদি etc.

Comments

এটি একটি একক ট্যাগ সহ অবস্থান এবং ক্রপ করার একটি দুর্দান্ত উপায়।

— rlemon

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

— j08691

এটি পরিচালনা করতে পারে: হোভার স্টেটগুলিও। ডিভি যদি কোথাও লিঙ্ক করার প্রয়োজন হয় কেবল একটি ট্যাগ যুক্ত করুন। মুদ্রণ হিসাবে, যে print.css সঙ্গে ঠিক করা যেতে পারে? আমি ভুল হলে শুধরে?

— মাইকেল

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

— মাইকেল

কিছু নয়, আমি এটিকে পরিবর্তন করেছি height: 460px; width: 100%;এবং এটি একটি

— কবজির

Answer 2

কোনও মোড়ক divবা অন্যান্য অকেজো কোড সহ একটি খাঁটি সিএসএস সমাধান :

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

Comments

মনে রাখবেন যে এটি দুর্ভাগ্যক্রমে IE এবং এজ এটিএম তে কাজ করছে না। : এখানে যে আরো বিস্তারিত জানার জন্য দেখুন stackoverflow.com/a/37792830/1398056

— baoutch

আমরা এটিকে অটো প্রস্থের সাথে বর্গক্ষেত্র করতে চাই উচ্চতাটি কী জানি না

— অরবিন্দ রেড্ডি

জুন 2018 পর্যন্ত, এটি কেবল আই 1111 (২.71১%) অবজেক্ট-ফিটকে সমর্থন করে না, এটি আমার পক্ষে যথেষ্ট ভাল enough

— রায়

2019 সালে সমর্থন এখন বেশ ভাল। কেবল ২.৩% এখনও আইই ১১ ব্যবহার করছেন এই সমাধানটি এত সহজ যে আমি সাহায্য করতে পারছি না তবে এটি ব্যবহার করতে পারি কারণ অন্যগুলি ব্যাকেন্ড কোড সহ কাজ করার জন্য চেষ্টা করার সময়টি নষ্ট করে দিয়েছি এমন ব্যথা হয় hours

— পল মরিস 21

এটি IE সম্পর্কে ভুলে যাওয়ার সময় এসেছে

— আইজি

Answer 3

1. আপনার চিত্রটি একটি ডিভের মধ্যে রাখুন।
2. আপনার দ্বি স্পষ্টত বর্গ মাত্রা দিন।
3. ডিভিএসে লুকানো ( overflow:hidden) এ CSS এর ওভারফ্লো সম্পত্তি সেট করুন ।
4. আপনার কল্পনাটি ডিভের ভিতরে রাখুন।
5. লাভ।

উদাহরণ স্বরূপ:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

Comments

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

— rlemon

@ রলেমন - তারপরে ডিভের অবস্থানটি আপেক্ষিকের তুলনায় এবং চিত্রের অবস্থানকে নিখুঁত স্থির করতে পারে এবং উপরের এবং বাম বৈশিষ্ট্যগুলিকে টুইঙ্ক করতে পারে।

— j08691

আমি সবাই উল্লেখ করার আগেই এটি উল্লেখ করছি; "তবে এখন সব সারিবদ্ধ হয়েছে!" -: পি

— র্লেমন

হ্যাঁ এটি কেন্দ্রীভূত হওয়া গুরুত্বপূর্ণ

— novicePrgrmr

Answer 4

পটভূমির আকার ব্যবহার করে: কভার - http://codepen.io/anon/pen/RNyKzB

সিএসএস:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

মার্কআপ:

<div class="image-container"></div>

Comments

এমট্রনিক্সের উত্তরের কেন্দ্রিক দক্ষতার সংমিশ্রণ, এটি আইই 9 তেও ভাল কাজ করে on

— ফেকার

Answer 5

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

আপনি আরও ব্যাখ্যা করতে আগ্রহী তবে কোডটি বেশ সহজ: আমি এটি সম্পর্কে একটি ব্লগ পোস্ট লিখেছিলাম :

এইচটিএমএল:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

সিএসএস:

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

JQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});

Comments

আমি মনে করি এটি সিএসএস ব্যাকগ্রাউন্ড বিকল্পের চেয়ে উচ্চতর কারণ চিত্রগুলি "স্টাইল" নয়, তাই এটি এইচটিএমএল স্তরতে রাখা উচিত। এটি HTML এর পরিবর্তে সিএসএসে রাখলে আপনার ওয়েবপৃষ্ঠার এসইওতে প্রভাব ফেলবে। ধন্যবাদ!

— জোসে ফ্লোরিডো

এটিকে উন্নত করার জন্য একটি ভাল ধারণা $(this).load(function(){...প্রতিটি লুপের অভ্যন্তরে যুক্ত করা, যাতে চিত্রটি লোড না হওয়া এবং আসল চিত্রের মাত্রা না পাওয়া পর্যন্ত jQuery কিছুটা অপেক্ষা করে।

— জোসে ফ্লোরিডো

Answer 6

চিত্রটি যদি কোনও প্রতিক্রিয়াশীল প্রস্থ সহ ধারকটিতে থাকে:

এইচটিএমএল

<div class="img-container">
  <img src="" alt="">
</div>

সিএসএস

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Comments

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

— রকি কেভ

Answer 7

আমার একই রকম সমস্যা ছিল এবং পটভূমির চিত্রগুলির সাথে "আপস" করতে পারিনি। আমি এই নিয়ে এসেছি।

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

আশাকরি এটা সাহায্য করবে!

উদাহরণ: https://jsfiddle.net/cfbuwxmr/1/

Answer 8

সিএসএস ব্যবহার করুন: ওভারফ্লো:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

Comments

এই মাত্রা খুব বর্গক্ষেত্র হয় না। :-)

— ইশারউড

না, আপনি ঠিক বলেছেন। Duh। আমি শুক্রবার বিকেলে কিছুটা বার্ন-আউট রোবটের মতো ওপির চিত্রের আকার থেকে বিদ্যমান উচ্চতাটি তুলছিলাম।

— ডায়োডিয়াস - জেমস ম্যাকফার্লান

হেহ। আমি সেখানে আপনার সাথে আছি :-)

— ইশারউড

Answer 9

হয় .testimg শ্রেণীর সাথে চিত্রের অভ্যন্তরে বর্গক্ষেত্রগুলির সাথে একটি ডিভ ব্যবহার করুন:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

বা চিত্রের ব্যাকগ্রাউন্ড সহ একটি বর্গক্ষেত্র ডিভ।

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

এখানে কয়েকটি উদাহরণ রয়েছে: http://jsfiddle.net/QqCLC/1/

ইমেজ সেন্টারগুলি আপডেট করেছেন

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>

Answer 10

object-fit: cover আপনার যা প্রয়োজন ঠিক তা করবে।

তবে এটি আইই / এজতে কাজ না করে। সমস্ত ব্রাউজারে কাজ করার জন্য কেবল সিএসএস দিয়ে এটি ঠিক করার জন্য নীচে প্রদর্শিত হিসাবে অনুসরণ করুন ।

আমি যে পদ্ধতিটি গ্রহণ করেছি তা হ'ল নিখুঁতভাবে ধারকটির ভিতরে চিত্রটি স্থাপন করা এবং তারপরে এটি সংমিশ্রণটি ব্যবহার করে ঠিক এটি কেন্দ্রে রেখে দেওয়া:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

এটি একবার কেন্দ্রে আসার পরে আমি ছবিটি উপহার দিই,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

এটি চিত্রটি অবজেক্ট-ফিট: কভারের প্রভাব পেতে পারে।

---

এখানে উপরের যুক্তি প্রদর্শন করা হয়।

https://jsfiddle.net/furqan_694/s3xLe1gp/

এই যুক্তিটি সমস্ত ব্রাউজারে কাজ করে।

---

আসল চিত্র

উল্লম্বভাবে ক্রপড

অনুভূমিকভাবে ক্রপড

---