html - কিভাবে আমি একটি ডিভি কন্টেইনার মাপসই একটি ইমেজ স্বয়ংক্রিয়ভাবে পুনরায় আকার পরিবর্তন করবেন




css image (19)

কিভাবে আপনি একটি বড় চিত্রটি স্বয়ংক্রিয়ভাবে পুনরায় আকার করবেন যাতে এটি একটি ছোট প্রস্থ ডিভি কন্টেইনারে ফিট হয়ে যাবে যখন এটি প্রস্থে রাখা হবে: উচ্চতা অনুপাত?

উদাহরণ: stackoverflow.com - যখন কোনও চিত্রটি সম্পাদক প্যানেলে সন্নিবেশ করা হয় এবং চিত্রটিতে সম্মুখের দিকে চিত্রটি খুব বড় হয়, তখন চিত্রটি স্বয়ংক্রিয়ভাবে পুনঃআকৃত হয়।


<Img> ট্যাগ ধারণকারী ডিভিতে আপনার চিত্রটির উচ্চতা এবং প্রস্থটি আপনার প্রয়োজন। সঠিক শৈলী ট্যাগ উচ্চতা / প্রস্থ দিতে ভুলবেন না। <Img> ট্যাগে, সর্বোচ্চ-উচ্চতা এবং সর্বোচ্চ-প্রস্থ 100% হিসাবে দিন।

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

আপনি অধিকার পেয়ে পরে সঠিক ক্লাসে আপনি বিবরণ যোগ করতে পারেন।


অথবা আপনি কেবল ব্যবহার করতে পারেন:

background-position:center;
background-size:cover;

এখন ছবিটি div এর সব স্থান নিতে হবে।


আপনি একটি ডিভিডি হিসাবে ব্যাকগ্রাউন্ড হিসাবে চিত্রটি সেট করতে পারেন, তারপর CSS পটভূমি-আকারের সম্পত্তিটি ব্যবহার করুন

background-size: cover;

এবং এটি "যতটা সম্ভব পটভূমির চিত্রটিকে বড় আকারে স্কেল করবে যাতে ব্যাকগ্রাউন্ড এলাকাটি সম্পূর্ণরূপে ব্যাকগ্রাউন্ড ইমেজ দ্বারা আচ্ছাদিত হয়। ব্যাকগ্রাউন্ড চিত্রের কিছু অংশ পটভূমি পজিশনিং এলাকার মধ্যে দেখতে পারা যায় না" -w3schools.com


আপনি ব্রাউজারটিকে যেখানে স্থাপন করছেন তার উচ্চতা জানাতে হবে।

.example {
  height: 220px; //DEFINE HEIGHT
  background:url('../img/example.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

আমার সমাধান দেখুন: http://codepen.io/petethepig/pen/dvFsA

এটি কোনও জেস কোড ছাড়াই বিশুদ্ধ CSS এ লেখা আছে। এটি কোনো আকার এবং কোন অভিযোজন চিত্র হ্যান্ডেল করতে পারেন।

যেমন এইচটিএমএল দেওয়া:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

সিএসএস কোড হবে:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

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

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0,0,0,.15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

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


আমি হাইপারলিঙ্কের ভিতরে আনুপাতিকভাবে এবং উল্লম্বভাবে উভয় উপরিভাগে একটি চিত্রকে কেন্দ্র করে এবং স্কেল করেছি:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

IE, ফায়ারফক্স, সাফারি পরীক্ষিত।

কেন্দ্রীকরণ সম্পর্কে আরও তথ্য here


ইমেজ ট্যাগ একটি স্পষ্ট প্রস্থ বা উচ্চতা প্রয়োগ করবেন না। পরিবর্তে, এটি দিন:

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

এছাড়াও, height: auto; আপনি শুধুমাত্র একটি প্রস্থ নির্দিষ্ট করতে চান।

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

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>


এই সমাধানটি চিত্রটি প্রসারিত করে না এবং সমগ্র ধারকটি পূরণ করে না, তবে এটির কিছু ছবিও কেটে দেয়।

এইচটিএমএল

 <div><img src="/images/image.png"></div>

সিএসএস

div {
  width: 100%;
  height: 10em;
  overflow: hidden;

img {
  min-width: 100%;
  min-height: 100%;

}

একটি সহজ সমাধান (4-পদক্ষেপ ফিক্স !!) যে আমার জন্য কাজ বলে মনে হচ্ছে, নীচের। আশা করি এটি সাহায্য করবে। উদাহরণটি সামগ্রিক আকার নির্ধারণের জন্য প্রস্থ ব্যবহার করে, তবে আপনি এটির পরিবর্তে উচ্চতা ব্যবহার করতে এটি ফ্লিপ করতে পারেন।

  1. ইমেজ ধারক (উদাহরণস্বরূপ সিএসএস স্টাইলিং প্রয়োগ করুন
  2. আপনি চান মাত্রা প্রস্থ সম্পত্তি সেট করুন
    • মাত্রাগুলির জন্য আপেক্ষিক আকারের জন্য%, বা অটোসকিং (ইমেজ ধারক বা প্রদর্শনের উপর ভিত্তি করে) ব্যবহার করুন- স্ট্যাটিক বা সেট মাত্রার জন্য px (বা অন্যান্য) ব্যবহার করুন
  3. প্রস্থ উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে উচ্চতা সম্পত্তি সেট করুন
  4. উপভোগ করুন!

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

<img style="width:100%; height:auto;"
                            src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
                />

এখানে এমন একটি সমাধান যা উভয়টি উলম্বভাবে এবং আনুভূমিকভাবে কোনও প্রসারিত ব্যাসে আপনার আইএমজিটিকে কোনও সীমা ছাড়াই সঙ্কুচিত করবে, এমনকি যদি ছবিটি সরবরাহ করা খুব ছোট বা খুব বেশি ডিভিতে উপযুক্ত না হয়। এইচটিএমএল:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

সিএসএস:

#myDiv 
{
  height:104px;
  width:140px;
}
#myDiv img
{
  max-width:100%; 
  max-height:100%;
  margin:auto;
  display:block;
}

JQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

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


এটাকে সহজ করো!

কন্টেইনারটিকে একটি নির্দিষ্ট height এবং তারপরে img ট্যাগের জন্য এটি width এবং max-height সেট width

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

পার্থক্য হল আপনি width 100% max-width


নিম্নলিখিত আমার জন্য পুরোপুরি কাজ করে:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

নীচের কোডটি উপরে থেকে নেওয়া হয়েছে এবং storm.jpg নামক একটি চিত্র ব্যবহার করে আমার দ্বারা পরীক্ষিত হয়েছে। এটি একটি সহজ পৃষ্ঠাটির সম্পূর্ণ HTML কোড যা চিত্রটি প্রদর্শন করে। এটি নিখুঁত কাজ করে এবং www.resizemybrowser.com দিয়ে আমার দ্বারা পরীক্ষিত হয়েছিল। সিএসএস কোডটি আপনার এইচটিএমএল কোডের উপরে, আপনার মাথা বিভাগের নীচে রাখুন। আপনি যেখানে ছবি চান সেখানে ছবি কোড রাখুন।

<html>
<head>
  <style type="text/css">
  #myDiv 
  {
    height:auto;
    width:auto;
  }
  #myDiv img
  {
    max-width:100%; 
    max-height:100%;
    margin:auto;
    display:block;
  }
 </style>
</head>

<body>
    <div id="myDiv">
        <img src="images/storm.jpg">
    </div>
</body>
</html>

সমাধান গণিতের একটি বিট সঙ্গে সহজ ...

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

উদাহরণস্বরূপ, বলুন আপনার একটি চিত্র রয়েছে যার দৈর্ঘ্য 200 পিক্সেল এবং 160 পিক্সেলের উচ্চতা রয়েছে। আপনি নিরাপদে বলতে পারেন যে প্রস্থ মান 100% হবে কারণ এটি বড় মান। তারপরে উচ্চতা মান গণনা করার জন্য আপনি কেবল প্রস্থ দ্বারা উচ্চতা ভাগ করে যা 80% শতাংশের মান দেয়। কোডে এটি এমন কিছু দেখবে ...



একটি সুন্দর হ্যাক।

আপনি ইমেজ প্রতিক্রিয়া তৈরি করার দুটি উপায় আছে।

  1. যখন একটি চিত্র একটি ব্যাকগ্রাউন্ড ইমেজ।
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

here চালান

তবে ইমেজ ট্যাগ করার জন্য img ট্যাগটি ব্যবহার করা উচিত কারণ এটি background-image তুলনায় ভাল, যেমন এসইও background-image এর ক্ষেত্রে আপনি img ট্যাগের alt কীওয়ার্ড লিখতে পারেন। তাই এখানে আপনি ইমেজ প্রতিক্রিয়া করতে পারেন।

  1. ইমেজ img ট্যাগ যখন।
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

here চালান


সম্পাদনা: পূর্ববর্তী টেবিল ভিত্তিক চিত্র পজিশনিংয়ের IE11 তে সমস্যা ছিল ( max-height display:table কাজ করে না display:table উপাদানগুলি)। আমি এটি ইনলাইন ভিত্তিক পজিশনিং দ্বারা প্রতিস্থাপিত করেছি যা আই 7 এবং IE11 উভয়তে সূক্ষ্ম কাজ করে না তবে কম কোড প্রয়োজন।

এখানে বিষয় আমার নিতে হয়। কনটেইনারটি যদি নির্দিষ্ট আকারের থাকে তবে এটি কেবলমাত্র কাজ করবে ( max-width এবং max-height এমন কনটেইনারগুলির সাথে কংক্রিটের আকার ধারণ করে না বলে মনে হচ্ছে), তবে আমি CSS টি এমনভাবে লিখেছি যা এটি হতে পারে পুনঃব্যবহৃত (আপনার বিদ্যমান কন্টেইনারে picture-frame ক্লাস এবং px125 আকারের শ্রেণী যোগ করুন)।

CSS এ:

.picture-frame
{
    vertical-align:top;
    display:inline-block;
    text-align:center;
}

.picture-frame.px125
{
    width:125px;
    height:125px;
    line-height:125px;
}

.picture-frame img
{
    margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */
    max-width:100%;
    max-height:100%;
    display:inline-block;
    vertical-align: middle;
    border:0; /* Remove border on imgs enclosed in anchors in IE */
}

এবং এইচটিএমএল:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

ডেমো

/* Main style */

.picture-frame
{
    vertical-align:top;
    display:inline-block;
    text-align:center;
}

.picture-frame.px32
{
    width:32px;
    height:32px;
    line-height:32px;
}

.picture-frame.px125
{
    width:125px;
    height:125px;
    line-height:125px;
}

.picture-frame img
{
    margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */
    max-width:100%;
    max-height:100%;
    display:inline-block;
    vertical-align: middle;
    border:0; /* Remove border on imgs enclosed in anchors in IE */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}
<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

সম্পাদনা: JS ব্যবহার করে সম্ভাব্য আরও উন্নতি (ইমেজ upscaling):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

<style type="text/css"> 
#container{
text-align:center;
width: 100%;
height: 200px; /*set height*/
margin: 0px;
padding: 0px;
background-image:url('../assets/images/img.jpg');
background-size: content; /*scaling down large image to a div*/
background-repeat:no-repeat;
background-position:center;
}
</style>

<div id="container>
<!--inside container-->
</div>




autoresize