আমি ইমেজ নিয়ে কাজ করছি, এবং আমি অনুপাত অনুপাত নিয়ে একটি সমস্যা জুড়েছিলাম।
<img src="big_image.jpg" width="900" height="600" alt="" />আপনি দেখতে পারেন, heightএবং widthইতিমধ্যে নির্দিষ্ট করা আছে। আমি চিত্রগুলির জন্য সিএসএস বিধি যুক্ত করেছি:
img {
max-width:500px;
}তবে এর জন্য big_image.jpg, আমি পেয়েছি width=500এবং height=600। আমি কীভাবে চিত্রগুলিকে পুনরায় আকার দিতে সেট করতে পারি, তার অনুপাতের অনুপাত রেখে।
উত্তর:
img {
display: block;
max-width:230px;
max-height:95px;
width: auto;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">এটি চিত্রকে সঙ্কুচিত করে তুলবে যদি এটি নির্দিষ্ট ক্ষেত্রের জন্য খুব বড় হয় (হিসাবে, এটি চিত্রটিকে বড় করে না)।
<img>একটি প্রস্থ এবং উচ্চতা অন্তর্ভুক্ত সম্পর্কে ছিল এবং আমি মনে করি এর অর্থ আপনি !importantট্যাগের প্রস্থ / উচ্চতার তথ্যকে অবরুদ্ধ করার জন্য ব্যবহার করতে হবে।
!importantপ্রয়োজন হয় না।
আমি এই সমস্যাটির সাথে বেশ কঠিনভাবে লড়াই করেছি এবং অবশেষে এই সহজ সমাধানে পৌঁছেছি:
object-fit: cover;
width: 100%;
height: 250px;আপনার প্রয়োজন অনুসারে আপনি প্রস্থ এবং উচ্চতা সামঞ্জস্য করতে পারেন এবং অবজেক্ট-ফিট সম্পত্তি আপনার জন্য ক্রপিং করবে।
চিয়ার্স।
object-fitদুর্দান্ত, দুর্দান্ত টিপ! যদি কেউ আই আই সামঞ্জস্যতা নিয়ে ভাবছেন তবে কয়েকটি সূক্ষ্ম পলিফিল গ্রন্থাগার রয়েছে।
object-fit: containএকটি প্রস্থ বা উচ্চতা ব্যবহার এবং নির্দিষ্ট করতে পারেন !
নীচের সমাধানগুলি প্যারেন্ট বক্সের প্রস্থের উপর নির্ভর করে চিত্রটিকে স্কেলিং এবং স্কেলিং মঞ্জুরি দেবে ।
সমস্ত চিত্রগুলির কেবলমাত্র প্রদর্শনের উদ্দেশ্যে একটি নির্দিষ্ট প্রস্থ সহ একটি পিতামাতার ধারক থাকে । উত্পাদনে, এটি প্যারেন্ট বক্সের প্রস্থ হবে।
এই সমাধানটি ব্রাউজারকে সর্বাধিক উপলব্ধ প্রস্থের সাথে চিত্রটি রেন্ডার করতে এবং সেই প্রস্থের শতাংশ হিসাবে উচ্চতা সামঞ্জস্য করতে বলে।
.parent {
width: 100px;
}
img {
display: block;
width: 100%;
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
<img width="400" height="400" src="https://placehold.it/400x400">
</div>ফ্যানসিয়ার সলিউশনের সাহায্যে আপনি চিত্রটির আকার নির্বিশেষে ক্রপ করতে সক্ষম হবেন এবং ফসলের ক্ষতিপূরণ দিতে একটি পটভূমি রঙ যুক্ত করতে পারবেন।
.parent {
width: 100px;
}
.container {
display: block;
width: 100%;
height: auto;
position: relative;
overflow: hidden;
padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}
.container img {
display: block;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
<div class="container">
<img width="640" height="220" src="https://placehold.it/640x220">
</div>
</div>রেখাটি নির্দিষ্ট প্যাডিংয়ের জন্য, আপনাকে চিত্রের দিক অনুপাত গণনা করতে হবে, উদাহরণস্বরূপ:
640px (w) = 100%
220px (h) = ?
640/220 = 2.909
100/2.909 = 34.37%সুতরাং, শীর্ষ প্যাডিং = 34.37%।
!importantহয় না এখানে দরকার আছে।
পটভূমি-আকারের সম্পত্তিটি কেবলমাত্র>> = 9 তবে আপনি যদি তা ঠিক করেন তবে আপনি একটি ডিভ ব্যবহার করে background-imageসেট করতে পারেন background-size: contain:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}এখন আপনি যা চান তার জন্য আপনার ডিভ আকারটি সেট করতে পারেন এবং কেবল চিত্রটি তার অনুপাতের অনুপাত ঠিক রাখবে না এটি ডিভের মধ্যে উল্লম্ব এবং অনুভূমিকভাবে উভয়কেই কেন্দ্রীভূত করা হবে। কেবল CSS এ আকারগুলি নির্ধারণ করতে ভুলবেন না যেহেতু ডিভগুলিতে ট্যাগের মধ্যে প্রস্থ / উচ্চতার বৈশিষ্ট্য নেই।
এই পদ্ধতির ব্যবহার setecs উত্তরের চেয়ে আলাদা, এটি ব্যবহার করার মাধ্যমে চিত্রের ক্ষেত্রটি আপনার দ্বারা স্থির এবং সংজ্ঞায়িত হবে (খালি স্থানগুলি অনুভূমিকভাবে বা উলম্বভাবে ডিভ আকার এবং চিত্রের অনুপাতের উপর নির্ভর করে রেখে যাবে), যখন Setecs উত্তর আপনাকে একটি বাক্স পাবে যা ঠিক একই স্কেলড চিত্রের আকার (খালি জায়গা ছাড়াই)।
সম্পাদনা করুন: MDN ব্যাকগ্রাউন্ড-আকারের ডকুমেন্টেশন অনুসারে আপনি মালিকানাধীন ফিল্টার ঘোষণার সাহায্যে আইই 8-তে পটভূমি-আকারের সম্পত্তিটি অনুকরণ করতে পারেন:
যদিও ইন্টারনেট এক্সপ্লোরার 8 ব্যাকগ্রাউন্ড-আকারের সম্পত্তিটি সমর্থন করে না, মান-অ-মানক-ফিল্টার ফাংশনটি ব্যবহার করে এর কিছু কার্যকারিতা অনুকরণ করা সম্ভব:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";এখানে কিছু উত্তরের সাথে খুব মিল, তবে আমার ক্ষেত্রে আমার কাছে এমন চিত্র ছিল যা কখনও কখনও লম্বা, কখনও কখনও বড় larger
সমস্ত চিত্র সমস্ত উপলব্ধ স্থান ব্যবহার করে, অনুপাত রাখে এবং কাটবে না তা নিশ্চিত করতে এই শৈলীটি কবজির মতো কাজ করেছে:
.img {
object-fit: contain;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}object-fitআমার জন্য কাজ করে এটি সমস্ত ব্রাউজারে কাজ করে?
.imgবাবা-মা বা ছবিতে একটি বর্গ? আপনি উভয় প্রতিকৃতি এবং ল্যান্ডস্কেপ চিত্রের জন্য উদাহরণস্বরূপ একটি jsfiddle বানাতে পারেন?
"উচ্চতা" সম্পত্তি সরান।
<img src="big_image.jpg" width="900" alt=""/>উভয় নির্দিষ্ট করে আপনি চিত্রটির দিক অনুপাত পরিবর্তন করছেন। কেবলমাত্র একটি সেটিংস পুনরায় আকার দেবে তবে অনুপাতের অনুপাতটি সংরক্ষণ করবে।
Izচ্ছিকভাবে, তদারকি সীমাবদ্ধ করতে:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>heightবৈশিষ্ট্যটি বাদ দেওয়ার নেতিবাচক দিকটি imgহ'ল চিত্রটি ডাউনলোডের আগে ব্রাউজারটি চিত্রটি কতটা স্থান গ্রহণ করবে তা গণনা করতে পারে না। এটি পৃষ্ঠাটি রেন্ডার করতে ধীর করে তোলে এবং এটি আরও "জাম্পিং" করতে পারে।
সঙ্গে ইমেজ জন্য অনুপাত সংরক্ষণে কোন মান উপায় নেই width, heightএবং max-widthএকসঙ্গে নির্দিষ্ট করা হয়েছে।
সুতরাং আমরা চিত্রগুলি লোড করার সময় পৃষ্ঠা "জাম্পগুলি" নির্দিষ্ট করতে widthএবং heightপ্রতিরোধ করতে বাধ্য করি বা চিত্রগুলির max-widthজন্য মাত্রা ব্যবহার এবং নির্দিষ্ট না করি।
জাস্ট width(ব্যতীত height) নির্দিষ্ট করা সাধারণত খুব বেশি বোঝায় না, তবে আপনি আপনার স্টাইলশীটের heightমতো একটি বিধি যুক্ত করে এইচটিএমএল-অ্যাট্রিবিউটকে ওভাররাইড করার চেষ্টা করতে পারেন IMG {height: auto; }।
সম্পর্কিত ফায়ারফক্স বাগ 392261 দেখুন ।
!importantসিএসএসে ব্যবহার করবেন না । এটি এমন একটি হ্যাক যা অবশেষে আপনাকে হতাশ করতে ফিরে আসবে।
!importantএখানেও দরকার নেই।
এখানে একটি সমাধান:
img {
width: 100%;
height: auto;
object-fit: cover;
}এটি নিশ্চিত করবে যে চিত্রটি সর্বদা পুরো পিতামাতাকে coversেকে রাখে (স্কেলিং ডাউন এবং উপরে) এবং একই দিক অনুপাত রাখে।
আপনার চিত্র ধারক ট্যাগের সিএসএস শ্রেণি এতে সেট করুন image-class:
<div class="image-full"></div>এবং এটি আপনার সিএসএস স্টাইলশিট যুক্ত করুন।
.image-full {
background: url(...some image...) no-repeat;
background-size: cover;
background-position: center center;
}প্রতিক্রিয়াশীল চিত্রটি বজায় রাখার জন্য চিত্রটিকে একটি নির্দিষ্ট দিক অনুপাত রাখতে বাধ্য করার জন্য আপনি নিম্নলিখিতটি করতে পারেন:
এইচটিএমএল:
<div class="ratio2-1">
<img src="../image.png" alt="image">
</div>এবং এসসিএসএস:
.ratio2-1 {
overflow: hidden;
position: relative;
&:before {
content: '';
display: block;
padding-top: 50%; // ratio 2:1
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}এটি কোনও নির্দিষ্ট দিক অনুপাত প্রয়োগ করতে ব্যবহার করা যেতে পারে, লেখকরা যে চিত্রটি আপলোড করে তার আকার নির্বিশেষে।
Http://codepen.io/Kseso/pen/bfdhg- এ @ কসোকে ধন্যবাদ । আরও অনুপাত এবং কার্যকারী উদাহরণের জন্য এই URL টি পরীক্ষা করুন।
border-radius। তবে দুর্ভাগ্যক্রমে, এটি চিত্রটি কাটাচ্ছে এবং ডিভিতে যতদূর আমি চেষ্টা করেছি ততক্ষণ চিত্রটির সীমানা তৈরি করার সাথে এটি এত ভাল করে না।
সঠিক আকারের মাপসইযুক্ত চিত্রটিকে জোর করতে, আপনাকে খুব বেশি কোড লেখার দরকার নেই। এটা খুব সহজ
img{
width: 200px;
height: auto;
object-fit: contain; /* Fit logo in the image size */
-o-object-fit: contain; /* Fit logo fro opera browser */
object-position: top; /* Set logo position */
-o-object-position: top; /* Logo position for opera browser */
}<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">https://jsfiddle.net/sot2qgj6/3/
এখানে উত্তর যদি আপনার সাথে ইমেজ লাগাতে চান হয় প্রস্থের নির্দিষ্ট শতাংশ , কিন্তু প্রস্থের পিক্সেল না ফিক্সড ।
এবং স্ক্রিনের বিভিন্ন আকারের সাথে কাজ করার সময় এটি কার্যকর হবে ।
কৌশলগুলি হয়
padding-topপ্রস্থ থেকে উচ্চতা সেট করতে ব্যবহার করে।position: absoluteপ্যাডিং স্পেসে চিত্র স্থাপন করতে ব্যবহার করা।max-height and max-widthচিত্রটি পিতামণ্ডলের উপাদানগুলির উপর দিয়ে যাবে না তা নিশ্চিত করে করে।display:block and margin: autoইমেজটি কেন্দ্রে ব্যবহার করে ।আমি ঝাঁকের ভিতরে বেশিরভাগ কৌশল সম্পর্কেও মন্তব্য করেছি।
এটি ঘটানোর জন্য আরও কিছু উপায়ও খুঁজে পেয়েছি। এইচটিএমএলে কোনও আসল চিত্র থাকবে না, তাই যখন html এ "img" উপাদান প্রয়োজন তখন আমি ব্যক্তিগতভাবে শীর্ষ উত্তরটি সঞ্চার করি।
ব্যাকগ্রাউন্ড ব্যবহার করে সহজ সিএসএস http://jsfiddle.net/4660s79h/2/
উপরে শব্দের সাথে পটভূমি-চিত্র http://jsfiddle.net/4660s79h/1/
অবস্থান নিখুঁত ব্যবহার করার ধারণাটি এখানে থেকে http://www.w3schools.com/howto/howto_css_aspect_ratio.asp
আপনি এটি ব্যবহার করতে পারেন:
img {
width: 500px;
height: 600px;
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}আপনি এটির মতো একটি ডিভ তৈরি করতে পারেন:
<div class="image" style="background-image:url('/to/your/image')"></div>এবং এটি স্টাইল করতে এই CSS ব্যবহার করুন:
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be coverএটি চিত্রকে সঙ্কুচিত করে তুলবে যদি এটি নির্দিষ্ট ক্ষেত্রের জন্য খুব বড় হয় (হিসাবে, এটি চিত্রটিকে বড় করে না)।
সেটেকের মাধ্যমে সমাধান অটো মোডে "সঙ্কুচিত থেকে ফিট" এর জন্য ঠিক আছে। তবে, 'অটো' মোডে ফিট করার জন্য সর্বোত্তমভাবে প্রসারিত করতে, আপনাকে প্রথমে প্রাপ্ত চিত্রটি একটি টেম্প আইডিতে রাখতে হবে, এটি উচ্চতা বা প্রস্থে প্রসারিত করা যায় কিনা তা পরীক্ষা করুন (তার দিকের রেশন v / s এর অনুপাতের উপর নির্ভর করে আপনার প্রদর্শন ব্লক),
$(".temp_image").attr("src","str.jpg" ).load(function() {
// callback to get actual size of received image
// define to expand image in Height
if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
$(".image").css('height', max_height_of_box);
$(".image").css('width',' auto');
} else {
// define to expand image in Width
$(".image").css('width' ,max_width_of_box);
$(".image").css('height','auto');
}
//Finally put the image to Completely Fill the display area while maintaining aspect ratio.
$(".image").attr("src","str.jpg");
});যখন প্রাপ্ত চিত্রগুলি প্রদর্শন বাক্সের চেয়ে ছোট হয় তখন এই পদ্ধতিটি কার্যকর। আকার এবং ব্যান্ডউইথকে বাঁচাতে আপনার বড় প্রদর্শন বাক্সটি পূরণ করতে আপনাকে অবশ্যই তাদের প্রসারিত সংস্করণের পরিবর্তে মূল সার্ভারে সেভ করতে হবে।
আমি একটি প্রতিক্রিয়াশীল পদ্ধতির জন্য পরামর্শ দিচ্ছি সেরা অনুশীলনটি ভিউপোর্ট ইউনিট এবং নূন্যতম / সর্বোচ্চ বৈশিষ্ট্যগুলি নীচে ব্যবহার করা হবে :
img{
display: block;
width: 12vw;
height:12vw;
max-width:100%;
min-width:100px;
min-height:100px;
object-fit:contain;
}img {
max-width: 80px; /* Also works with percentage value like 100% */
height: auto;
}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">
<p>Let's say the author of the HTML deliberately wants
the height to be half the value of the width,
this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">উল্লম্ব সারিবদ্ধকরণের জন্য সিউডো উপাদান ব্যবহার সম্পর্কে কীভাবে? এই কম কোডটি কোনও কারাউসেলের জন্য তবে আমার ধারণা এটি প্রতিটি স্থির আকারের পাত্রে কাজ করে। এটি দিক অনুপাত রাখবে এবং সংক্ষিপ্ত মাত্রার জন্য উপরে / নীচে বা বামে / লেখার ধূসর-গা dark় বারগুলি সন্নিবেশ করবে। ইতিমধ্যে চিত্রটি অনুভূমিকভাবে পাঠ্য-প্রান্তিককরণ এবং সিউডো উপাদান দ্বারা উল্লম্বভাবে কেন্দ্রিক হয়।
> li {
float: left;
overflow: hidden;
background-color: @gray-dark;
text-align: center;
> a img,
> img {
display: inline-block;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
margin: auto;
text-align: center;
}
// Add pseudo element for vertical alignment of inline (img)
&:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
}আমি মনে করি, শেষ পর্যন্ত এটিই সেরা সমাধান, সহজ এবং সহজ :
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}