ডিভিডে কেন্দ্রের ওভারসাইজড চিত্র

Question

আমি কেবল সিএসএস ব্যবহার করে একটি ডিভের মধ্যে কীভাবে একটি বড় আকারের চিত্রটি কেন্দ্র করতে হবে তা বাছাই করার চেষ্টা করছি।

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

চিত্রটি তার প্রশস্ততম সম্ভাব্য মানের (নকশার একটি max-widthমান রয়েছে) আশেপাশের ডিভিটি পূরণ করার জন্য আকার আকার ধারণ করেছে ।

চিত্রটি পার্শ্ববর্তী ডিভের চেয়ে ছোট হলে এটি করা বেশ সহজ:

margin-left: auto;
margin-right: auto;
display: block; 

তবে চিত্রটি ডিভের চেয়ে বড় হয়ে গেলে এটি কেবল বাম প্রান্তে শুরু হয় এবং ডানদিকে কেন্দ্রের বাইরে থাকে (আমরা ব্যবহার করছি overflow: hidden)।

আমরা একটি বরাদ্দ করতে width=100%পারি, তবে ব্রাউজারগুলি উচ্চমানের চিত্রের আশেপাশে চিত্রগুলি এবং ওয়েব ডিজাইন কেন্দ্রগুলিকে পুনরায় আকার দেওয়ার একটি স্বল্প কাজ করে।

overflow:hiddenউভয় প্রান্তকে সমানভাবে কেটে ফেললে চিত্রটিকে কেন্দ্র করে নিয়ে কোনও ধারণা ?

Comments

আপনি কি কখনও টমকে এই সমস্যাটি সমাধান করেছেন? আমি এই মুহুর্তে একই ইস্যুতে চলেছি। :)

— ctrlplusb

আমি ধরে নিচ্ছি যে আপনার চিত্রের প্রস্থ আলাদা হয়।

— অন্যান্যদেবী

Answer 1

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

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

Comments

দুর্দান্ত: এটি যে কোনও উপাদান নিয়ে কাজ করে। এমনকি এইচটিএমএল 5 ভিডিও সহ ... ধন্যবাদ!

— taseenb

যেহেতু আমি এটি বুঝতে পারি: এটি কাজ করে কারণ এটি চিত্রের চেয়ে বড় একটি উপাদান তৈরি করে (আশাকরি) (2 * 9999px x 2 * 9999px) এবং সেই উপাদানটির অভ্যন্তরে চিত্রটিকে কেন্দ্র করে (মার্জিন: অটো)। সুতরাং যতক্ষণ না ছবিটি 2 * 9999px এর বেশি না হয় এটি কাজ করা উচিত।

— মাইকেল Krupp

-100%উপরে / ডান / নীচে / বাম জন্য ব্যবহার করবেন না কেন ? এটি দিয়ে ধারকটির আক্ষরিক কোনও প্রস্থ থাকতে পারে ।

— সাইমন

হ্যাঁ, আমি -100%সমস্যাটিও অভিজ্ঞতা পেয়েছি ^^ BTW: যদি আপনি যোগ min-widthএবং min-heightএর 100%আপনি মূলত একটি পেতে background-size: cover;ইমেজ ট্যাগ আচরণ -> jsfiddle

— সাইমন

@ হারিসন পাওয়ারস ওয়েল প্যারেন্টের অবশ্যই উচ্চতা থাকতে হবে, তা স্থির বা গতিশীল হোক না কেন। এটিতেও যদি কাজ করা হয় যে অন্য কোনও সামগ্রী ডিভিটি পূরণ করছে যার ফলে এটির উচ্চতা রয়েছে (উদাহরণস্বরূপ পাঠ্য)।

— হিউনিস

Answer 2

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

margin-left: 50%;
transform: translateX(-50%);

.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

তাহলে কেন এটি কাজ করে?
প্রথম নজরে মনে হয় যে আমরা 50% ডান দিকে এবং তারপরে 50% আবার বামে স্থানান্তরিত করব। যে শূন্য শিফট হতে হবে, তাই কি?
তবে 50% একই নয়, কারণ প্রসঙ্গটি গুরুত্বপূর্ণ। আপনি যদি আপেক্ষিক ইউনিট ব্যবহার করেন তবে একটি মার্জিন প্যারেন্ট এলিমেন্টের প্রস্থের শতাংশ হিসাবে গণনা করা হবে , যখন ট্রান্সফর্মটি একই উপাদানটির সাথে 50% আপেক্ষিক হবে ।

সিএসএস যুক্ত করার আগে আমাদের এই পরিস্থিতি রয়েছে

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       +-----------------------------------------------------------+
       | Element E                                                 |
       +-----------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

যোগ শৈলী সঙ্গে margin-left: 50%আমাদের আছে

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       |                     +-----------------------------------------------------------+
       |                     | Element E                                                 |
       |                     +-----------------------------------------------------------+
       |                     |                     |
       +---------------------|---------------------+
       |========= a ========>|

       a is 50% width of P

এবং transform: translateX(-50%)শিফটগুলি বাম দিকে ফিরে আসে

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

দুর্ভাগ্যক্রমে এটি কেবল অনুভূমিক কেন্দ্রীকরণের জন্য কাজ করে কারণ মার্জিন শতাংশের গণনা সর্বদা প্রস্থের সাথে আপেক্ষিক। অর্থাত্ কেবল margin-leftএবং নয় margin-right, margin-topএবং margin-bottomপ্রস্থের সাথেও গণনা করা হয়।

ব্রাউজারের সামঞ্জস্যতা কোনও সমস্যা হওয়া উচিত নয়: https://caniuse.com/#feat=transforms2d

Comments

এটি উল্লম্ব প্রান্তিককরণের জন্য কাজ করে না (যখন। অভ্যন্তরের বৃহত্তর উচ্চতা থাকে। আউটার)

— 59-

@ ক্রনফাই নং উল্লম্বভাবে এটি কাজ করবে না, কারণ প্রস্থেরmargin-top: 50% 50% হবে । পছন্দসই উচ্চতা না।

— ইউনজেন

এটি এখন পর্যন্ত সবচেয়ে মার্জিত সমাধান

— সৌহাইব বেসবেস

কিছু সময়ের জন্য সমাধান অনুসন্ধান, সর্বোত্তম, সহজতম; চিয়ার্স

— lauWM

এটি খাঁটি উইজার্ড যাদু। ধন্যবাদ! সাফারি এবং ক্রোমে পুরোপুরি কাজ করে ( -webkit-transform: translateX(-50%);ভাল পরিমাপের জন্য একটি সংযোজন সহ )

— নিক শ্নেবল

Answer 3

ডিভের ভিতরে একটি বৃহত ডিভ রাখুন, এটি কেন্দ্র করুন এবং সেই ডিভের ভিতরে চিত্রটি কেন্দ্র করুন।

এটি অনুভূমিকভাবে এটি কেন্দ্র করে:

এইচটিএমএল:

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

সিএসএস:

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

ডেমো: http://jsfiddle.net/Guffa/L9BnL/

এটি উল্লম্বভাবে কেন্দ্রীভূত করতে আপনি অভ্যন্তরীণ ডিভের জন্যও এটি একই ব্যবহার করতে পারেন তবে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে ঠিক করতে নাও।

Comments

এটি "ইমেজকন্টেইনার" এর মধ্যে কেন্দ্রে চিত্রের বাম প্রান্ত দিয়ে শেষ হয়েছিল। আমি উপরে মন্তব্য হিসাবে, আমাদের ইমেজ ধারক ডিভ তরল প্রস্থ এবং নির্দিষ্ট উচ্চতা।

— টম

@ টম: আমি যদি ধারকটিতে থাকা widthসেটিংটি সরিয়ে ফেলি তবে এটি পিতামাতার প্রস্থ হবে এবং পৃষ্ঠাটি চিত্রের চেয়ে সংকীর্ণ হলেও ডান প্রান্তের মতো বাম প্রান্তটি যতটা লুকিয়ে থাকবে ততক্ষণ চিত্রটি কেন্দ্রীভূত হবে : jsfiddle.net/Guffa/L9BnL/2

— গুফা

অনুপ্রেরণার জন্য ধন্যবাদ। আমি অবস্থান ব্যবহার করি: .imageCenter এর জন্য আপেক্ষিক। এইভাবে আমার পজিশনের দরকার নেই: পিতামাতার ধারকের জন্য আপেক্ষিক।

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

এই প্রশ্নের অনেক চালাক কৌশল আছে এবং তারা সবই তাদের ত্রুটিগুলি পেয়েছে। কিছু "আরও ভাল" কাজ করে তবে এগুলি বোঝার পক্ষে মোটেও সহজ নয়। এই সমাধানটি নিখুঁত করে তোলে, চিত্রটি ক্রপ করা হচ্ছে এমন একটি বিস্তৃত ডিভের মধ্যে সাধারণত কেন্দ্রীভূত হচ্ছে। এটি ভুল অনুভব করে তবে ওয়েব-পদার্থবিজ্ঞানের আইন ভঙ্গ না করে এটি অবশ্যই কাজ করে। আমি এই বিকল্পটি বেশ কয়েকটি জটিল-বোঝার কৌশলগুলি বেছে নিয়েছি, যদিও এটি কিছুটা নোংরা অনুভব করে।

— র‌্যাডলি সুস্টায়ার

Answer 4

গেমের দেরিতে, তবে আমি খুঁজে পেয়েছি যে এই পদ্ধতিটি অত্যন্ত স্বজ্ঞাত। https://codepen.io/adamchenwei/pen/BRNxJr

সিএসএস

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-items: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

এইচটিএমএল

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>

Comments

নিস! এটিও সরল করা যায়। কৌতুকটি display: flexপিতামাতার পাত্রে এবং align-self: centerচিত্রের মাধ্যমে সম্পন্ন হয় । এখানে একটি অপ্টিমাইজড সংস্করণ রয়েছে: codepen.io/anon/pen/dWKyey

— caiosm1005

Answer 5

চিত্র ট্যাগটিতে স্থির বা স্পষ্ট প্রস্থ বা উচ্চতা ব্যবহার করবেন না। পরিবর্তে, এটি কোড:

      max-width:100%;
      max-height:100%;

উদাহরণ: http://jsfiddle.net/xwrvxser/1/

Comments

এরপরে এটি চিত্রের চারপাশে স্থান ছেড়ে দেয় যা আমি বিশ্বাস করি তারা এড়াতে চাইছেন।

— ইয়ন

Answer 6

আমি কোনও চিত্রকে ডিভি / নোডের ব্যাকগ্রাউন্ড তৈরির বিশাল অনুরাগী - তবে আপনি background-position: centerপর্দার আকার নির্বিশেষে এটিকে কেন্দ্রবিন্দুতে বৈশিষ্ট্যটি ব্যবহার করতে পারেন

Comments

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

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

Answer 7

প্রস্থ এবং উচ্চতা কেবল উদাহরণস্বরূপ:

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

আপনার পিতা-মাতা ডিভের বাম এবং শীর্ষে আপনার পর্দার উইন্ডোটির খুব উপরে এবং বাম না হলে এটি আপনার পক্ষে কাজ করতে হবে। এটা আমার জন্য কাজ করে.

Comments

কোনও পার্থক্য মনে হয় নি। প্রস্থটি তরল হওয়া সত্ত্বেও এর কোনও কারণ আছে কিনা তা নিশ্চিত নন, উচ্চতাটি পিতামাতার দ্বি কী হবে তা নির্ধারণ করা হয়েছে।

— টম

চিত্রটি ধারকের চেয়ে ছোট হলে এই কৌশলটি কাজ করে।

— অন্যান্যদেবী

Answer 8

আমি এটিকে আরও মার্জিত সমাধান বলে মনে করেছি, ফ্লেক্স ছাড়াই:

.wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}

Answer 9

@ ইউনজেনের দুর্দান্ত উত্তরে বিল্ডিং:

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

এই জাতীয় ব্যাকগ্রাউন্ড চিত্রের জন্য নিখুঁত সিএসএস (এটি <img>ট্যাগে ব্যবহার করুন ):

/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;

/* Move to the left by 50% of own width */
transform: translateX(-50%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;

Answer 10

আপনি যে বিকল্পটি ব্যবহার করতে পারেন object-fit: coverতা হ'ল এটি কিছুটা মত আচরণ করে background-size: cover। বস্তু-ফিট উপর আরও ।

নীচের সমস্ত জেএস উপেক্ষা করুন, এটি কেবলমাত্র ডেমোর জন্য।

এখানে মূল কীটি হ'ল আপনাকে চিত্রটি একটি মোড়কের অভ্যন্তরে সেট করতে হবে এবং নীচের বৈশিষ্ট্যগুলি সরবরাহ করতে হবে।

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

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

কেবলমাত্র খারাপ দিকটি object-fitএটি আই 11 এ কাজ করে না ।

// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');


const resizeWrapper = () => {
  wrapper.style.width = widthInput.value + "px";
  wrapper.style.height = heightInput.value + "px";
}

button.addEventListener("click", resizeWrapper);

.wrapper {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 2em;
  border: 1px solid red;
}

.wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.imgur.com/DrzMS8i.png">
</div>


<!-- demo only -->
<lable for="width">
  Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
  height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>