সিএসএস: দিক অনুপাত রেখে 100% প্রস্থ বা উচ্চতা?

Question

বর্তমানে, শৈলী সঙ্গে, আমি ব্যবহার করতে পারেন width: 100%এবং autoউচ্চতা (বা তদ্বিপরীত) এ, কিন্তু আমি এখনও যথাক্রমে একটি নির্দিষ্ট অবস্থানে ইমেজ সীমাবদ্ধ করতে পারে না, হয় খুবই লম্বা খুবই চওড়া হচ্ছে বা।

কোন ধারনা?

Comments

সমস্যাটির উদাহরণ দেখাতে আপনি কোনও লিঙ্ক বা স্ক্রিনশট পোস্ট করতে পারেন?

— মারো

Answer 1

আপনি যদি কেবল একটি চিত্রের একটি মাত্রা নির্ধারণ করেন তবে চিত্রের অনুপাতটি সর্বদা সংরক্ষণ করা হবে।

চিত্রটি কি আপনার পছন্দের চেয়ে লম্বা / লম্বা?

আপনি এটি কোনও ডিআইভি-র ভিতরে রাখতে পারেন যা আপনি ইমেজটির জন্য সর্বাধিক উচ্চতা / প্রস্থকে সেট করতে পারেন এবং তারপরে ওভারফ্লো সেট করে রাখতে পারেন: লুকানো। এটি আপনি যা চান তার বাইরে কিছু কাটাবেন।

কোনও চিত্র যদি 100% প্রশস্ত এবং উচ্চতা হয়: স্বয়ংক্রিয়ভাবে এবং আপনি মনে করেন এটি খুব লম্বা, কারণ এটির কারণটি অনুপাত সংরক্ষণ করা হয়েছে specifically আপনার ক্রপ করতে হবে বা দিক অনুপাত পরিবর্তন করতে হবে।

আপনি যেটি বিশেষভাবে সম্পাদন করার চেষ্টা করছেন সে সম্পর্কে আরও কিছু তথ্য সরবরাহ করুন এবং আমি আরও সাহায্য করার চেষ্টা করব!

--- ফিডব্যাক ভিত্তিক সম্পাদনা করুন ---

আপনি কি সর্বোচ্চ-প্রস্থ এবং সর্বোচ্চ-উচ্চতার বৈশিষ্ট্যগুলির সাথে পরিচিত ? আপনি সর্বদা এটি স্থির করতে পারেন। আপনি যদি কোনও ন্যূনতম সেট না করেন এবং আপনি সর্বাধিক উচ্চতা এবং প্রস্থ নির্ধারণ করেন তবে আপনার চিত্র বিকৃত হবে না (দিক অনুপাতটি সংরক্ষণ করা হবে) এবং এটি যে মাত্রা দীর্ঘতম এবং এর সর্বোচ্চটি হিট করবে তার চেয়ে বড় কোনও হবে না।

Comments

যদি চিত্রটি প্রশস্তের চেয়ে লম্বা হয় তবে আমি উচ্চতা = 100% এবং প্রস্থ = অটো ব্যবহার করব, যদি চিত্রটি লম্বার চেয়ে প্রশস্ত হয় তবে আমি প্রস্থ = 100%, উচ্চতা = অটো ব্যবহার করব। আমি কখনই জানি না কেস কি? সর্বোচ্চ উচ্চতা / প্রস্থ অনুসারে ফসলের কাজ হবে - তবে যদি উপায় না থাকে তবে আমি তা ব্যবহার করতাম ...

— ওয়েস্টন ওয়াটসন

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

— অ্যান্ড্রু

আমার

— আইএমজি

object-fitকোন কাজে লাগবে না?

— লিগি

Answer 2

কয়েক বছর পরে, একই প্রয়োজনীয়তার সন্ধান করে আমি পটভূমির আকার ব্যবহার করে একটি সিএসএস বিকল্প পেয়েছি।

এটি আধুনিক ব্রাউজারগুলিতে (আই 9 +) কাজ করার কথা রয়েছে।

<div id="container" style="background-image:url(myimage.png)">
</div>

এবং শৈলী:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

উল্লেখ: http://www.w3schools.com/cssref/css3_pr_background-size.asp

এবং ডেমো: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Comments

আদর্শ সমাধান, যা দুর্ভাগ্যক্রমে IE8 দ্বারা সমর্থিত নয় :(

— জাপ্রেস্কট

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

— kloddant

Answer 3

সিএসএস max-widthসম্পত্তি সেট করে 100%, একটি চিত্র তার প্যারেন্টিং উপাদানটির প্রস্থ পূরণ করবে, তবে এটি প্রকৃত আকারের চেয়ে বড় আকারে দেবে না, ফলে রেজুলেশন সংরক্ষণ করে।

এই বৈশিষ্ট্যটি ব্যবহার করে চিত্রের দিক অনুপাত বজায় রাখার জন্য heightসম্পত্তি সেট করা autoস্থিতিশীল উচ্চতাটিকে ওভাররাইড করার অনুমতি দেয় এবং চিত্রটিকে সমস্ত দিকের মধ্যে আনুপাতিকভাবে ফ্লেক্স করতে সক্ষম করে।

img {
    max-width: 100%;
    height: auto;      
}

Comments

তবুও চিত্রটি ভাসমান অবস্থায় heightauto

— পুনরায় প্রবাহের

Answer 4

সহজ মার্জিত কাজের সমাধান:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Comments

আমাকে সম্পর্কে মনে করিয়ে দেওয়ার জন্য ধন্যবাদ object-fit। ঠিক আমার যা প্রয়োজন ছিল।

— অ্যাশ ক্লার্ক

এটি একটি আদর্শ সমাধান আছে, কিন্তু দুর্ভাগ্যবশত object-fitমার্চ 28 তম হিসাবে IE কিংবা এজ কোন সংস্করণে সমর্থিত নয়, 2017.

— সাইমন জি

মার্চ 2019 পর্যন্ত এই বৈশিষ্ট্যের 90% সমর্থন রয়েছে - সুতরাং এটি সত্যই সঠিক উত্তর হিসাবে বিবেচনা করা উচিত।

— হ্যাম্পাস আহলগ্রেন

এছাড়াও, এটি লক্ষ্য করুন object-fit: containএবং ১০০% পছন্দ করবেন object-fit: coverনা width- আপনার যেমন কংক্রিট ইউনিট ব্যবহার করা উচিতpx

— ফ্লেমস্টর্ম

আমি অন্যান্য উত্তরগুলিতে চেষ্টা object-fitকরেছি max-widthএবং max-heightব্যবহার করেছি, তবে এটি কার্যকর হয়নি। এটি এমনকি এলোমেলো চিত্রের মাপের জন্যও পুরোপুরি কাজ করে widthএবংheight 100%

— হাফাচ্যাট

Answer 5

একই সমস্যা ছিল। আমার জন্য সমস্যাটি হ'ল উচ্চতার সম্পত্তিটি ইতিমধ্যে অন্য কোথাও সংজ্ঞায়িত করা হয়েছিল, এটি এটি ঠিক করেছিলেন:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Comments

ঠিক আমি খুঁজছেন ছিল কি. ধন্যবাদ মিলিয়ন ডুড

— লন্ডন স্মিথ

পারফেক্ট যেখানে চিত্রের আকার পিতামাতার চেয়ে কম বা বড় হতে পারে এবং এটি সর্বোচ্চ প্রস্থ বা সর্বাধিক উচ্চতার সাথে নিখুঁত কেন্দ্রে আকারে পরিবর্তন করা হবে। আপনাকে পটভূমি হিসাবে চিত্রটি ব্যবহার করতে হবে না যা "কভার" সেট করা থাকলে পিতামাতাকে পুরোপুরি পূরণ করবে।

— রেহমত

Answer 6

সহজ সমাধান:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

যাইহোক, আপনি যদি এটি কোনও পিতামহক ডিভ ধারক কেন্দ্রে রাখতে চান তবে আপনি সেই সিএসএস বৈশিষ্ট্যগুলি যুক্ত করতে পারেন:

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

এটি প্রত্যাশা মতো সত্যই কাজ করা উচিত :)

Comments

প্রথম অংশ upvated। দ্বিতীয় অংশটি আমার পক্ষে কাজ করে নি ... :(

— বিকাশ বানসাল

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

— জাস্টামার্টিন

Answer 7

উত্তরের একটিতে ব্যাকগ্রাউন্ড-আকার অন্তর্ভুক্ত রয়েছে : সিএসএস বিবৃতি রয়েছে যা আমি অনেক পছন্দ করি কারণ এটি আপনি যা করতে চান তার সোজাসুজি বিবৃতি এবং ব্রাউজার কেবল এটি করে।

দুর্ভাগ্যক্রমে শীঘ্রই বা পরে আপনাকে একটি ছায়া প্রয়োগ করতে হবে যা দুর্ভাগ্যক্রমে পটভূমির চিত্র সমাধানগুলির সাথে ভাল খেলবে না।

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

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

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

প্রথমে ছোট প্রস্থগুলিকে রেন্ডার করার অনুমতি দেওয়ার জন্য এবং দ্বিতীয়ত শতাংশকে শতাংশের ভিত্তিতে তৈরি করা উচিত যা এটি প্যারাম্যাট্রিক করে।

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

মনে রাখবেন এটির একটি সুন্দর ছায়া রয়েছে;)

এই ঝাঁকুনিতে একটি সরাসরি উদাহরণ উপভোগ করুন: http://jsfiddle.net/pligor/gx8qthqL/2/

Comments

চিয়ার্স - ঠিক আমি যা খুঁজছিলাম

— এলি

এই সমাধান এবং jsdfiddle লিঙ্কের জন্য ধন্যবাদ। এটি আসলে আমার প্রতিক্রিয়া-চিত্র-গ্যালারীটির জন্য কাজ করেছিল যেখানে আমি উভয়ই ব্যবহার করি: বড় উচ্চতার চিত্র এবং বড় প্রস্থের চিত্রগুলি। :)

— ইউজিনিজাস এস।

Answer 8

আমি এটি আয়তক্ষেত্রাকার ধারক জন্য উচ্চতা এবং প্রস্থ স্থির সঙ্গে ব্যবহার করি তবে বিভিন্ন আকারের চিত্র সহ।

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

Answer 9

দিক অনুপাতের সম্মান করা উচিত মাত্রায় অটো ব্যবহার করা এটি সেরা। আপনি যদি অন্য সম্পত্তিটি অটোতে সেট না করেন তবে আজকাল বেশিরভাগ ব্রাউজারগুলি ধরে নিবে যে আপনি দিকটি রেশনকে সম্মান করতে চান তবে সেগুলি সবই নয় (উদাহরণস্বরূপ উইন্ডোজ ফোন 8-এ নয় 10)

width: 100%;
height: auto;

Answer 10

এটি একটি খুব সরল সমাধান যা আমি কনটা লিঙ্ক অনুসরণ করে এবং পটভূমির আকার দেখার পরে নিয়ে এসেছি। এটি চিত্রটি ফুটিয়ে তোলে এবং তারপরে এটি বাইরের পাত্রে ডাব্লু / ও স্কেলিংকে কেন্দ্র করে ফিট করে।

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Comments

ভাল এবং স্মার্ট সমাধান! অতিরিক্ত 40% দিয়ে আপনি দিক অনুপাতকে ক্ষতিপূরণ দেবেন। ধন্যবাদ!

— সাসাচ

আপনি কেবল background-size: contain;চিত্রটিকে পটভূমিতে ফিট করতে ব্যবহার করতে পারেন।

— সাইমন জি

Answer 11

কোনও পুরানো ইস্যুতে ঝাঁপিয়ে পড়া নয়, ...

#container img {
      max-width:100%;
      height:auto !important;
}

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

Answer 12

আজকাল ব্যবহার করতে পারেন vwএবং vhইউনিট, যার 1% প্রতিনিধিত্ব বনাম iewport এর W idth এবং জ যথাক্রমে আট।

https://css-tricks.com/fun-viewport-units/

সুতরাং, উদাহরণস্বরূপ:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... আকৃতির অনুপাত বজায় রেখে চিত্রটি যথাসম্ভব লম্বা করে তুলবে, তবে ভিউপোর্টের প্রশস্ত বা 100% এর বেশি না হয়ে।

Answer 13

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

সিএসএসের সাহায্যে আপনার ইচ্ছা মতো করা সম্ভব নয়: চিত্রটির প্রস্থটি 100% প্রস্থের হবে, তবে যদি এই প্রস্থের ফলাফলটি খুব বেশি উচ্চতায় হয় তবে সর্বাধিক উচ্চতা প্রযোজ্য হবে - এবং অবশ্যই সঠিক অনুপাত হবে সংরক্ষিত.

Answer 14

আমি মনে করি আপনি এটি যা খুঁজছিলেন, আমি এটি আমার স্ব সন্ধান করছিলাম তবে আমি কোডটি পেয়েছি বলে আবার এটি মনে পড়ে।

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

ডিজিটাল বিবর্তন চলছে।