විශාල රූපයක් ස්වයංක්‍රීයව ප්‍රතිනිර්මාණය කරන්නේ කෙසේද, එමඟින් එහි පළල: උස අනුපාතය පවත්වා ගෙන යන අතර එය කුඩා පළල බෙදීම් භාජනයකට ගැලපේ.

උදාහරණය: stackoverflow.com - රූපයක් සංස්කාරක පැනලයට ඇතුළු කර රූපය පිටුවට ගැළපෙන තරම් විශාල වූ විට, රූපය ස්වයංක්‍රීයව ප්‍රතිප්‍රමාණනය වේ.

රූප ටැගයට පැහැදිලි පළලක් හෝ උස යොදන්න එපා. ඒ වෙනුවට, එය දෙන්න:

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>

වස්තු-යෝග්‍යතාව

මෙය කිරීමට තවත් ක්‍රමයක් ඇති බව පෙනේ.

<img style='height: 100%; width: 100%; object-fit: contain'/>

වැඩේ කරයි. එය CSS 3 දේවල්.

ෆෙඩල්: http://jsfiddle.net/mbHB4/7364/

JPEGs හෝ PNG ලිපිගොනු වැනි ස්ථාවර ප්‍රමාණයේ රූප සහිතව, නිර්ණායක ආකාරයකින් මෙය නිවැරදිව කිරීමට දැනට ක්‍රමයක් නොමැත.

රූපයක් සමානුපාතිකව ප්‍රමාණය වෙනස් කිරීම සඳහා, ඔබට උස හෝ පළල "100%" ලෙස සැකසිය යුතුය , නමුත් දෙකම නොවේ. ඔබ දෙකම "100%" ලෙස සකසන්නේ නම්, ඔබේ රූපය දිගු වනු ඇත.

උස හෝ පළල කළ යුතුද යන්න තේරීම ඔබගේ රූපය සහ බහාලුම් මානයන් මත රඳා පවතී:

1. ඔබේ රූපය සහ බහාලුම "පෝට්රේට් හැඩැති" හෝ "භූ දර්ශන හැඩැති" යන දෙකම (ඒවා පළලට වඩා උස හෝ පිළිවෙලින් උසින් පළලට වඩා උස) නම්, එවිට උස හෝ පළල "% 100" කමක් නැත. .
2. ඔබේ රූපය ආලේඛ්‍ය චිත්‍රයක් නම් සහ ඔබේ බහාලුම භූ දර්ශනය නම්, ඔබ height="100%"රූපය මත සැකසිය යුතුය .
3. ඔබේ රූපය භූ දර්ශනය නම් සහ ඔබේ බහාලුම ආලේඛ්‍ය චිත්‍රයක් නම්, ඔබ width="100%"රූපය මත සැකසිය යුතුය .

ඔබේ රූපය විචල්ය ප්‍රමාණයේ දෛශික රූප ආකෘතියක් වන SVG නම්, බහාලුම ස්වයංක්‍රීයව සිදු වන පරිදි ඔබට පුළුල් කළ හැකිය.

SVG ගොනුවේ <svg>ටැගයේ මෙම ගුණාංග කිසිවක් නොමැති බව ඔබ සහතික කළ යුතුය :

height
width
viewbox

එහි ඇති බොහෝ දෛශික ඇඳීම් වැඩසටහන් SVG ගොනුවක් අපනයනය කිරීමේදී මෙම ගුණාංග සැකසෙනු ඇත, එබැවින් ඔබ අපනයනය කරන සෑම අවස්ථාවකම ඔබේ ගොනුව අතින් සංස්කරණය කිරීමට හෝ එය කිරීමට ස්ක්‍රිප්ට් එකක් ලිවීමට සිදුවේ.

මෙන්න විසඳුමකි, සපයන ලද රූපය ඉතා කුඩා හෝ විශාලත්වයට වඩා විශාල වුවද, කිසිදු දිගකින් තොරව ඔබේ img එක සිරස් අතට හා තිරස් අතට පෙළගස්වනු ඇත.

HTML අන්තර්ගතය:

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

CSS අන්තර්ගතය:

#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.

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

වෙනස නම් ඔබ widthඑය 100% ක් ලෙස සකසා ගැනීමයි max-width.

ලස්සන හැක් එකක්.

රූපය ප්‍රතිචාර දැක්වීමට ඔබට ක්‍රම දෙකක් තිබේ.

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>

එය මෙහි ධාවනය කරන්න

2. රූපය 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>

එය මෙහි ධාවනය කරන්න

ඔබට රූපය පසුබිම ලෙස කොටසකට සැකසිය හැකිය, ඉන්පසු CSS පසුබිම් ප්‍රමාණයේ දේපල භාවිතා කරන්න :

background-size: cover;

එය "පසුබිම් රූපය පසුබිම් රූපයෙන් සම්පූර්ණයෙන්ම ආවරණය වන පරිදි පසුබිම් රූපය හැකිතාක් විශාල කරන්න. පසුබිම් රූපයේ සමහර කොටස් පසුබිම් ස්ථානගත කිරීමේ ප්‍රදේශය තුළ නොපෙනේ" - W3 පාසල්

මගේ විසඳුම බලන්න: http://codepen.io/petethepig/pen/dvFsA

එය ජාවාස්ක්‍රිප්ට් කේතයකින් තොරව පිරිසිදු CSS වලින් ලියා ඇත. එයට ඕනෑම ප්‍රමාණයක සහ ඕනෑම දිශානතියක රූප හැසිරවිය හැකිය.

එවැනි HTML ලබා දී ඇත:

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

CSS කේතය වනුයේ:

.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;
}

මම දැන් jQuery ප්ලගිනයක් ප්‍රකාශයට පත් කළෙමි, එය ඔබට අවශ්‍ය දේ හරියටම විකල්ප බොහොමයක් සමඟ කරයි:

https://github.com/GestiXi/image-scale

භාවිතය:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

ජාවාස්ක්‍රිප්ට්

$(function() {
    $("img.scale").imageScale();
});

මෙම විසඳුම රූපය දිගු නොකරන අතර මුළු බහාලුම පුරවයි, නමුත් එය රූපයෙන් සමහරක් කපා දමයි.

HTML:

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

CSS:

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

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

බොහෝ අය යෝජනා කර ඇත්තේ හොඳ විකල්පයක් වන වස්තු-යෝග්‍යතාවයි . නමුත් පැරණි බ්‍රව්සර්වලද එය ක්‍රියාත්මක වීමට ඔබට අවශ්‍ය නම් , එය පහසුවෙන් කළ හැකි තවත් ක්‍රමයක් තිබේ.

එය තරමක් සරලයි. මම ගත් ප්රවිෂ්ටය සමග එහි ඇතුළත ප්රතිරූපය ස්ථානගත විය පරම පසුව මැද, දකුණු හසුවීම සංයෝජන භාවිතා:

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%;

මෙමඟින් රූපයට Object-fit: cover හි බලපෑම ලැබේ.

මෙන්න ඉහත තර්කනයේ නිරූපණයකි.

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

මෙම තර්කනය සියලුම බ්‍රව්සර් වල ක්‍රියාත්මක වේ.

පහත සඳහන් දෑ මට හොඳින් ක්‍රියාත්මක වේ:

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

කිසිදු ජාවාස්ක්‍රිප්ට් අවශ්‍යතාවයකින් තොරව මට වඩා හොඳ විසඳුමක් තිබේ. එය සම්පුර්ණයෙන්ම ප්‍රතිචාර දක්වන අතර මම එය බොහෝ දේ භාවිතා කරමි. ඔබට බොහෝ විට ඕනෑම දර්ශන අනුපාතයක අනුරුවක් නිශ්චිත දර්ශන අනුපාතයක් සහිත බහාලුම් මූලද්‍රව්‍යයකට ගැලපේ. මේ සියල්ල මුළුමනින්ම ප්‍රතිචාර දැක්වීම අත්‍යවශ්‍ය වේ.

/* 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>

ඔබට උපරිම පළල සහ උපරිම උස ස්වාධීනව සැකසිය හැකිය; රූපය කුඩාම එකට ගරු කරනු ඇත (රූපයේ අගයන් සහ දර්ශන අනුපාතය අනුව). ඔබට අවශ්‍ය පරිදි පෙළ පෙළගැස්වීමටද ඔබට සැකසිය හැකිය (නිදසුනක් ලෙස, අසීමිත සුදු පසුබිමක නිෂ්පාදන පින්තූරයක් සඳහා ඔබට එය පහසුවෙන් මැද පහළට ස්ථානගත කළ හැකිය).

මම පහත කේතය භාවිතා කරමින් මෙම ගැටළුව විසඳා ගත්තෙමි:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

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

මම අධි-සබැඳියක් තුළ රූපයක් තිරස් අතට හා සිරස් අතට සමානුපාතිකව කේන්ද්‍රගත කර පරිමාණය කළෙමි:

#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;
}

එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර්, ෆයර්ෆොක්ස් සහ සෆාරි හි අත්හදා බලන ලදී.

කේන්ද්‍රගත කිරීම පිළිබඳ වැඩි විස්තර මෙහි ඇත.

<img> ටැගය අඩංගු වන div ට ඔබේ රූපයට අවශ්‍ය උස සහ පළල දෙන්න. නිසි විලාසිතාවේ ටැගය තුළ උස / පළල ලබා දීමට අමතක නොකරන්න.

<img> ටැගය තුළ, max-heightසහ max-width100% ලෙස දෙන්න .

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

ඔබ එය නිවැරදි වූ පසු සුදුසු පන්තිවල විස්තර එකතු කළ හැකිය.

පහත කේතය පෙර පිළිතුරු වලින් අනුවර්තනය වී ඇති අතර මා විසින් පරීක්ෂා කරනු ලබන්නේ රූපයක් භාවිතා කරමිනි storm.jpg.

රූපය පෙන්වන සරල පිටුවක් සඳහා වන සම්පූර්ණ HTML කේතය මෙයයි. මෙය පරිපූර්ණව ක්‍රියාත්මක වන අතර www.resizemybrowser.com සමඟ මා විසින් පරීක්ෂා කරන ලදී. CSS කේතය ඔබේ HTML කේතයේ ඉහළින්, ඔබේ ප්‍රධාන කොටසට යටින් තබන්න. පින්තූර කේතය ඔබට අවශ්‍ය ඕනෑම තැනක තබන්න.

<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>

<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>

ඔබ එය තබන ස්ථානයේ උස බ්‍රව්සරයට පැවසිය යුතුය:

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

සංස්කරණය කරන්න: පෙර වගු මත පදනම් වූ රූප ස්ථානගත කිරීම ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 හි ගැටළු ඇති විය ( මූලද්‍රව්‍යවල max-heightක්‍රියා නොකරයි display:table). ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 යන දෙඅංශයෙන්ම හොඳින් ක්‍රියාත්මක වනවා පමණක් නොව ඊට අඩු කේතයක්ද අවශ්‍ය වේ.

මෙන්න මම මෙම විෂය පිළිබඳ මගේ අදහස. එය ක්‍රියාත්මක වන්නේ කන්ටේනරයේ නිශ්චිත ප්‍රමාණයක් තිබේ නම් පමණි ( 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 images enclosed in anchors in Internet Explorer */
}

සහ HTML වලින්:

<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 images enclosed in anchors in Internet Explorer */
}

/* 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>

සංස්කරණය කරන්න: ජාවාස්ක්‍රිප්ට් භාවිතයෙන් වැඩි දියුණු කළ හැකි (ඉහළ රූප):

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) };
});

මෙහි පිළිතුරු දී ඇති පරිදි , එය ඔබගේ බ්‍රව්සරයේ ක්‍රියා නොකරන්නේ නම් (ක්‍රෝම් වැනි) vhවෙනුවට ඒකක භාවිතා කළ හැකිය max-height: 100%:

img {
    max-height: 75vh;
}

රූපය ඉතා කුඩා වූ විට Thorn007 වෙතින් පිළිගත් පිළිතුර ක්‍රියා නොකරයි .

මෙය විසඳීම සඳහා මම පරිමාණ සාධකයක් එක් කළෙමි . මේ ආකාරයෙන්, එය රූපය විශාල කරවන අතර එය ඩිව් කන්ටේනරය පුරවයි.

උදාහරණයක්:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

සටහන්:

1. WebKit පිරිසැලසුම් සඳහා ඔබ එකතු විය යුතුයි -webkit-transform:scale(4); -webkit-transform-origin:left top;ශෛලිය තුල.
2. පරිමාණ සාධකය 4 සමඟ, ඔබට උපරිම පළල = 400/4 = 100 සහ උපරිම උස = 200/4 = 50
3. විකල්ප විසඳුමක් වන්නේ උපරිම පළල සහ උපරිම උස 25% ක් ලෙස සකස් කිරීමයි. එය ඊටත් වඩා සරල ය.

ඔබ Bootstrap භාවිතා කරන්නේ නම්, ඔබට ටැගය img-responsiveවෙත පන්තිය එක් කළ යුතුය img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Bootstrap පින්තූර

මා වෙනුවෙන් වැඩ කරන බව පෙනෙන සරල විසඳුමක් (4-පියවර නිවැරදි කිරීම !!) පහතින්. උදාහරණය සමස්ත ප්‍රමාණය තීරණය කිරීම සඳහා පළල භාවිතා කරයි, නමුත් ඒ වෙනුවට උස භාවිතා කිරීම සඳහා ඔබට එය පෙරළා ගත හැකිය.

1. රූප බහාලුමට CSS මෝස්තරය යොදන්න (නිදසුනක් ලෙස, <img>)
2. පළල දේපල ඔබට අවශ්‍ය මානයට සකසන්න
   • මානයන් %සඳහා, සාපේක්ෂ ප්‍රමාණය හෝ ස්වයංක්‍රීයකරණය සඳහා භාවිතා කරන්න (රූප බහාලුම් හෝ සංදර්ශකය මත පදනම්ව)
   • pxස්ථිතික හෝ සැකසූ මානයක් සඳහා (හෝ වෙනත්) භාවිතා කරන්න
3. පළල මත පදනම්ව ස්වයංක්‍රීයව සැකසීමට උස දේපල සකසන්න
4. ප්‍රීති වන්න!

උදාහරණයක් වශයෙන්,

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

පිළිගත් පිළිතුර ඇතුළුව සපයා ඇති සියලුම පිළිතුරු ක්‍රියාත්මක වන්නේ එතීම ස්ථාවර ප්‍රමාණයේ යැයි උපකල්පනය යටතේ පමණිdiv . එනිසා එතීමේ ප්‍රමාණය කුමක් වුවත් එය කරන්නේ කෙසේද යන්න divසහ ඔබ ප්‍රතිචාරාත්මක පිටුවක් සංවර්ධනය කරන්නේ නම් මෙය ඉතා ප්‍රයෝජනවත් වේ:

ඔබේ DIVතේරීම තුළ මෙම ප්‍රකාශ ලියන්න :

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

ඉන්පසු මෙම ප්‍රකාශ ඔබගේ IMGතේරීම් කාරකය තුළ තබන්න :

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

ඉතා වැදගත්:

වටිනාකම maxHeightද විය යුතුය එම දෙකටම DIVහා IMGතේරීම් කමිටුව.

සරල විසඳුමක් නම් නම්යශීලී කොටුව භාවිතා කිරීමයි. කන්ටේනරයේ CSS පහත පරිදි අර්ථ දක්වන්න:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

අඩංගු රූප පළල 100% දක්වා සකසන්න, ඔබ විසින් සංරක්ෂණය කරන ලද මානයන් සහිත කන්ටේනරයේ ලස්සන කේන්ද්‍රීය රූපයක් ලබා ගත යුතුය.

ගණිතය සමඟ විසඳුම පහසුය ...

රූපය div එකක තබා HTML ගොනුවේ ඔබ රූපය සඳහන් කරන්න. පළල සහ උසෙහි නිශ්චිත අනුපාතය ගණනය කිරීම සඳහා රූපයේ පික්සල් අගයන් භාවිතා කරමින් පළල සහ උස අගයන් ප්‍රතිශතයකින් සකසන්න.

උදාහරණයක් ලෙස, ඔබට පික්සල් 200 ක පළලක් සහ පික්සල් 160 ක උසකින් යුත් රූපයක් ඇති බව පවසන්න. පළල අගය 100% ක් වනු ඇතැයි ඔබට ආරක්ෂිතව පැවසිය හැකිය, මන්ද එය විශාල අගයයි. උස අගය ගණනය කිරීම සඳහා ඔබ උසින් පළලෙන් බෙදීමෙන් ප්‍රතිශතයේ අගය 80% කි. කේතයේ එය මේ වගේ දෙයක් පෙනෙනු ඇත ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

මෙය කළ හැකි සරලම ක්‍රමය වන්නේ object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

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

ඔබ Bootstrap භාවිතා කරන්නේ නම්, img-responsiveපන්තිය එකතු කර වෙනස් කරන්න

.container img{
    object-fit: cover;
}

මගේ පිළිතුර පරීක්ෂා කරන්න, රූපයක් ප්‍රතිචාර දක්වන්න - සරලම ක්‍රමය -

img{
    width: 100%;
    max-width: 800px;
}

නැතහොත් ඔබට සරලව භාවිතා කළ හැකිය:

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

දැන් රූපය div හි සියලු ඉඩ ලබා ගනී.