html - एक div कंटेनर फिट करने के लिए मैं एक छवि को स्वतः आकार कैसे बदलूं




css image (18)

<Img> टैग वाले div में अपनी छवि के लिए आवश्यक ऊंचाई और चौड़ाई दें। उचित शैली टैग में ऊंचाई / चौड़ाई देने के लिए मत भूलना। <Img> टैग में, अधिकतम ऊंचाई और अधिकतम-चौड़ाई 100% दें।

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

आप सही वर्ग प्राप्त करने के बाद उचित कक्षाओं में विवरण जोड़ सकते हैं।

आप एक बड़ी छवि को स्वतः आकार कैसे बदलते हैं ताकि यह चौड़ाई को बनाए रखने के दौरान एक छोटी चौड़ाई div कंटेनर में फिट हो जाए: ऊंचाई अनुपात?

उदाहरण: stackoverflow.com - जब एक संपादक संपादक पैनल पर डाला जाता है और छवि पृष्ठ पर फ़िट होने के लिए बहुत बड़ी होती है, तो छवि स्वचालित रूप से आकार बदल जाती है।


Thorn007 से स्वीकृत उत्तर तब काम नहीं करता जब छवि बहुत छोटी हो
इसे हल करने के लिए, मैंने एक स्केल कारक जोड़ा। इस तरह, यह छवि को बड़ा बनाता है और यह div कंटेनर भरता है।

उदाहरण :

<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-transform जोड़ना होगा: स्केल (4); -webkit-transform-orig: बाएं शीर्ष; शैली में
2/4 के स्केल फैक्टर के साथ, आपके पास अधिकतम-चौड़ाई = 400/4 = 100 और अधिकतम-ऊंचाई = 200/4 = 50 है
3 / वैकल्पिक समाधान अधिकतम चौड़ाई और अधिकतम ऊंचाई 25% पर सेट करना है, यह भी आसान है


आपको ब्राउजर को उस स्थान की ऊंचाई बताना होगा जहां आप इसे रख रहे हैं।

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

इसे सरल बनाओ!

कंटेनर को एक निश्चित height और उसके बाद img टैग के लिए width और max-height निर्धारित करें।

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

अंतर यह है कि आप width को max-width नहीं 100% निर्धारित करते हैं।


ऐसा करने का सबसे आसान तरीका है

वस्तु-फिट का उपयोग करके

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

.container{
   height: 300px;
}

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

यदि आप बूटस्ट्रैप का उपयोग कर सिर्फ आईएमजी-उत्तरदायी वर्ग जोड़ते हैं और बदल जाते हैं

.container img{
      object-fit: cover;
    }

छवि टैग पर स्पष्ट चौड़ाई या ऊंचाई लागू न करें। इसके बजाए, इसे दें:

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

उदाहरण: 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{
   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>

मेरा जवाब https://.com/a/36712112/2439715

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

मेरा समाधान देखें: http://codepen.io/petethepig/pen/dvFsA

यह शुद्ध सीएसएस में लिखा गया है, बिना किसी जेएस कोड के। यह किसी भी आकार और किसी भी अभिविन्यास की छवियों को संभाल सकता है।

ऐसे एचटीएमएल को देखते हुए:

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

मैं क्षैतिज और ऊर्ध्वाधर दोनों तरह एक हाइपरलिंक के अंदर आनुपातिक रूप से एक छवि केंद्रित और स्केल किया:

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

आईई, फ़ायरफ़ॉक्स, सफारी में परीक्षण किया।

केंद्र के बारे में अधिक जानकारी here


मैंने अभी एक jQuery प्लगइन प्रकाशित किया है जो आपको बहुत सारे विकल्पों के साथ बिल्कुल वही करता है:

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

उपयोग:

एचटीएमएल

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

जे एस

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

यहां एक समाधान है जो दोनों को लंबवत और क्षैतिज रूप से किसी भी खींच के बिना एक div के भीतर क्षैतिज रूप से संरेखित करेगा, भले ही दी गई छवि div में फिट होने के लिए बहुत छोटी या बहुत बड़ी हो। एचटीएमएल:

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

मुझे उम्मीद है कि यह आपको लोगों की मदद करेगा


या आप बस उपयोग कर सकते हैं:

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

अब छवि div की सभी जगह ले जाएगी।


समाधान कुछ गणित के साथ आसान है ...

बस छवि को एक div में रखें और फिर HTML फ़ाइल में जहां आप छवि को चौड़ाई और ऊंचाई मानों को चौड़ाई से ऊंचाई के सटीक अनुपात की गणना करने के लिए छवि के पिक्सेल मानों का उपयोग करके प्रतिशत में सेट करें।

उदाहरण के लिए, कहें कि आपके पास एक ऐसी छवि है जिसमें 200 पिक्सल की चौड़ाई और 160 पिक्सेल की ऊंचाई है। आप सुरक्षित रूप से कह सकते हैं कि चौड़ाई मान 100% होगा क्योंकि यह बड़ा मूल्य है। फिर ऊंचाई मान की गणना करने के लिए आप ऊंचाई को चौड़ाई से विभाजित करते हैं जो 80% का प्रतिशत मान देता है। कोड में यह कुछ ऐसा दिखाई देगा ...


स्वीकार किए गए सभी सहित सभी प्रदत्त उत्तरों, केवल धारणा के तहत काम करते हैं कि div wrapper निश्चित आकार का है। तो यह है कि इसे 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 और IMG चयनकर्ताओं के लिए maxHeight का मूल्य maxHeight होना चाहिए।


एक सुंदर हैक।

आपके पास छवि को उत्तरदायी बनाने के दो तरीके हैं।

  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 से बेहतर है क्योंकि आप 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 और आईई 11 दोनों में ठीक काम करता है, बल्कि कम कोड की भी आवश्यकता है।

इस विषय पर मेरा लेना है। यह केवल तभी काम करेगा जब कंटेनर ने आकार निर्दिष्ट किया हो ( max-width और max-height उन कंटेनरों के साथ नहीं लगती है जिनके पास ठोस आकार नहीं है), लेकिन मैंने सीएसएस को इस तरह से लिखा है जो इसे होने की अनुमति देता है पुन: उपयोग (अपने मौजूदा कंटेनर में picture-frame वर्ग और px125 आकार वर्ग जोड़ें)।

सीएसएस में:

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

संपादित करें: जेएस (छवियों को 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) };
});




autoresize