एक निश्चित आकार कंटेनर

में एक छवि ऊंचाई आकार के आकार के अनुसार आकार का आकार कैसे बदलें, मुझे लगता है कि यह कठिन हो सकता है, मेरे पास HTML के साथ 10+ साल काम कर रहे हैं, लेकिन मुझे कोई नहीं मिल रहा है समाधान जिसमें जावास्क्रिप्ट के साथ जटिल गणनाओं के साथ काम करना शामिल नहीं है।एक निश्चित आकार कंटेनर

मेरे पास एक निश्चित आकार का कंटेनर दो में विभाजित है, इसलिए कंटेनर का शीर्ष आधा और निचला आधा है। शीर्ष आधे में एक छवि है। नीचे आधा पाठ है। मैं चाहता हूं कि छवि और पाठ सभी उपलब्ध स्थान पर कब्जा कर ले। यदि पाठ छोटा है, तो छवि के लिए और अधिक जगह उपलब्ध है। यदि पाठ बड़ा है, तो छवि गतिशील रूप से छोटी है। मैंने जो कुछ भी चाहते हैं उसे चित्रित करने के लिए मैंने कुछ स्क्रीनशॉट जोड़े हैं। सभी मामलों में, वे निश्चित आकार के कंटेनर के उपलब्ध ऊर्ध्वाधर स्थान का 100% पर कब्जा करते हैं।

Image with one line of text below it

Image with multiple lines of text below it

स्रोत

2015-04-23 jpatiaga

यह उत्तरदायी डिजाइन के सिद्धांत का अनुसरण करेगी। मुझे थोड़ा सा दें और मेरे पास आपके लिए एक कामकाजी जवाब होगा –

मुझे विचलित हो गया लेकिन ऐसा लगता है कि अन्य उपयोगकर्ताओं ने बहुत अच्छे सुझाव दिए हैं। digitaldouble या तो टेबल या flexboxes –

यहाँ आप शायद का उपयोग कर display: table-row

https://jsfiddle.net/4h37fv7o/

कोशिश की कोशिश और नीचे पाठ की लंबाई को संशोधित कर सकते हैं और एक शुद्ध सीएसएस दृष्टिकोण

है छवि का आकार बदलें।

कुछ चेतावनी हैं लेकिन यह काम करती है।

वैकल्पिक रूप से, आप पृष्ठभूमि छवि का उपयोग, यद्यपि flexbox उपयोग कर सकते हैं:

https://jsfiddle.net/kdm0amsx/1/

स्रोत

2015-04-23 01:14:01 DigitalDouble

का उपयोग कर एक सुरुचिपूर्ण सीएसएस केवल समाधान प्रदान किया यह एक सुरुचिपूर्ण शुद्ध सीएसएस विकल्प है। मुझे फ्लेक्स बॉक्स उपयोग –

भी पसंद है धन्यवाद! मुझे इस दृष्टिकोण को सबसे ज्यादा पसंद आया क्योंकि यह शुद्ध सीएसएस है। मैंने अधिकतम चौड़ाई और छवि को केंद्रित करके इसका उपयोग किया। – jpatiaga

वैकल्पिक रूप से, शायद सबसे आसान तरीका जावास्क्रिप्ट का element.getBoundingClientRect() फ़ंक्शन का उपयोग करें। इसके लिए आपके पाठ को अपने रिश्तेदार विभाजन के अंदर रखने की आवश्यकता होगी, फिर अपने समाप्त पाठ (पिक्सेल में) की ऊंचाई की गणना करने के लिए कहा गया फ़ंक्शन लागू करना होगा। चूंकि आप अपने मुख्य कंटेनर डिवीजन के लिए निश्चित आयामों का उपयोग कर रहे हैं, तो आप अपनी छवि के लिए शेष स्थान की गणना और उपयोग कर सकते हैं। ऊंचाई संपत्ति से मेल खाने के लिए पहलू अनुपात को काम करने की तरह यहां एक या दो मुश्किल छोटे अल्गोस आवश्यक हो सकते हैं।

उम्मीद है कि इससे मदद मिलती है; मुझे यकीन नहीं है कि जिस दृष्टिकोण से आप बचने की कोशिश कर रहे थे वह कितना जटिल था।

 <head> 
<style> 
    body{ 
     background: #111; 
     color:  #d00; 
    } 

    #mainContainerDiv{ 
      top:  20%; 
      height:  49%; 

      left:  30%; 
      width:  40%; 

      background: #c90; 
      color:  #d00; 

      position: absolute;  
    }  



    #image{ 
      top:  10%; 
      height:  30%; 

      left:  30%; 
      width:  40%; 

      background: #0d0; 
      color:  #ddd; 

      position: absolute;  
    }  



    #textAtBottom{ 
      bottom: 2%; 
      /*height:  40%;*/ 

      left:  30%; 
      width:  40%; 

      background: #d00; 
      color:  #eee; 

      padding: 1%; 
      position: absolute;  
    }

एबीसी डीईएफ़ GHI JKL एबीसी डीईएफ़ GHI JKL एबीसी डीईएफ़ GHI JKL एबीसी डीईएफ़ GHI JKL एबीसी डीईएफ़ GHI JKL एबीसी डीईएफ़ GHI JKL एबीसी डीईएफ़ GHI JKL एबीसी डीईएफ़ डीईएफ़ GHI JKL lorem ipsum doradum etsum ichtum latinum

 <!-- <div id="image">  UNCOMMENT THIS WHEN YOU'RE READY 
      </div> --> 

    </div><!-- mainContainerDiv--> 


    <script> 
     var a = document.getElementById('mainContainerDiv'); 
     var ar = a.getBoundingClientRect(); 
     alert('Main container element is ' + ar.top + 'pixels from its containing element i.e. <body>'); 

     // alert(' und hauptBeinhalter Unten ist ' + ar.bottom '); 
     // Bildis niedriger, so Teil ist ' + ar.height-ar.top + 'hoch total'); 


     var e = document.getElementById('textAtBottom'); 
     var x = e.getBoundingClientRect(); 

     alert('Text at Bottom starts ' + x.top + ' vertical pixels down from <body>'); 

     var numm = parseInt(x.top)-parseInt(ar.top); 
     alert('sooooo, you got '+ numm + ' pixels of space above the text to squeeze in your image!!!'); 
    </script>

स्रोत

2015-04-23 01:16:29 Hektor

छोटे जेएस/jQuery कोड के साथ आप अपने कंटेनर और टेक्स्ट की ऊंचाई की गणना कर सकते हैं, फिर छवि का आकार बदलें!

डेमो:https://jsfiddle.net/L42hguqw/2/

का उपयोग कर jQuery:

var resizeUI = function(){ 
     var container = $('.container').eq(0); 
     var textFrame = $('.container .textFrame'); 
     var maxH = container.innerHeight(); 
     var textH = textFrame.outerHeight(); 
     $('.container .imageFrame').height(parseInt(maxH-textH,10)).show(); 
    };

सीएसएस:

div.container{ 
    background: #BB0000; 
    width: 300px; 
    height: 300px; 
    overflow: hidden; 
} 

div.imageFrame{ 
    max-width: 100%; 
    max-height: 100%; 
    display: none; 
} 
div.imageFrame img{ 
    display: block; 
    height: 100%; 
} 

div.textFrame{ 
    max-width: 100%; 
    max-height: 100%; 
    background: #333; 
    color: #DDD; 
}

एचटीएमएल:

<div class="container"> 
    <div class="imageFrame"> 
     <img src="http://www.conservatoryweb.co.uk/wp-content/uploads/2012/04/iStock_000011293178XSmallPaulMaguire.jpg"/> 
    </div> 

    <div class="textFrame">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
</div>

स्रोत

2015-04-23 01:43:06

आप इसे प्रभावित करने के लिए जेएस + सीएसएस कैल्क का उपयोग कर सकते हैं। आप इसे पैमाने पर करने के appropiatly

calc("100% - " + paragraphHeightVariable + "px - 2em")

2em पैरा टैग की गद्दी के लिए खाते में करने के लिए है पाने के लिए छवि की ऊंचाई करने के लिए जे एस का उपयोग पाठ की ऊंचाई प्राप्त करने के लिए और लागू एक कैलोरी चाहते हैं। नीचे दिया गया उदाहरण अनुच्छेद ऊंचाई प्राप्त करने के लिए jQuery का उपयोग करता है लेकिन आप इसे पाने के लिए वैनिलाज लाइब्रेरी का उपयोग कर सकते हैं।

$(".container").each(function (a) { 
 
    var $container = $(this); 
 
    var $image = $container.children("img"); 
 
    var $p = $container.children("p"); 
 
    $image.css("height", "calc(100% - " + $p.height() + "px - 2em)"); 
 
    console.log($image.css("height"), $p.height()); 
 

 
});

.container { 
 
    width:400px; 
 
    height:450px; 
 
    background-color:grey; 
 
} 
 
.container p { 
 
    background-color:purple; 
 
} 
 
.container img { 
 
    max-width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img src="http://lorempixel.com/g/400/400/" /> 
 
    <p>Hello World!</p> 
 
</div> 
 
<br/> 
 
<div class="container"> 
 
    <img src="http://lorempixel.com/g/400/400/" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et mollis leo. Nunc vel finibus tortor. Nam suscipit quam purus, a cursus nulla efficitur non. Integer cursus arcu vel libero blandit efficitur. In at ligula placerat, mattis lacus semper, convallis lorem. 
 
    </p> 
 
</div> 
 
<br/> 
 
<div class="container"> 
 
    <img src="http://lorempixel.com/g/400/400/" /> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et mollis leo. Nunc vel finibus tortor. Nam suscipit quam purus, a cursus nulla efficitur non. Integer cursus arcu vel libero blandit efficitur. In at ligula placerat, mattis lacus semper, convallis lorem.Donec consectetur maximus mauris, egestas sollicitudin nunc imperdiet sit amet. Suspendisse ut consequat magna. In at eros mollis, malesuada arcu sit amet, imperdiet orci. Mauris vitae augue id nisi vulputate ultrices. Morbi a ipsum lacinia arcu consequat sollicitudin ut quis mauris. Quisque est dui, euismod non vestibulum sagittis, varius at elit. Maecenas facilisis tortor eget lorem aliquam, vel consequat lacus egestas. Nam vitae euismod nulla, in condimentum libero. Vivamus eget massa eros.</p> 
 
</div>

स्रोत

2015-04-23 01:45:53

एक निश्चित आकार कंटेनर

उत्तर

संबंधित मुद्दे