css - Maintain div aspect ratio according to height -

-

मुझे height को height < / strong>। इसलिए ऊंचाई में परिवर्तन के रूप में, चौड़ाई को अपडेट किया जाता है।

विपरीत पैडिंग-टॉप के लिए% मान का उपयोग करके प्राप्त होता है, लेकिन एक प्रतिशत के रूप में पैडिंग-बायां ऑब्जेक्ट की चौड़ाई का प्रतिशत होगा, इसकी ऊँचाई नहीं।

तो इस तरह मार्कअप के साथ: 

  & lt; div class = "box" & gt; & Lt; div वर्ग = "इनर" & gt; & lt; / div & gt; & Lt; / div & gt;

मैं इस तरह से कुछ का उपयोग करना चाहूंगा: 

  .box {position: absolute; मार्जिन-टॉप: 50%; नीचे: 0; }। खिलाड़ी {पैडिंग-बाएं: 200%; }

यह सुनिश्चित करने के लिए कि बॉक्स का पहलू अनुपात इसकी ऊंचाई के अनुसार बनाए रखा जाता है ऊँचाई द्रव की वजह से% मार्जिन है - जैसे कि खिड़की की ऊँचाई बदलती है, बॉक्स की ऊंचाई भी होगी।

मुझे पता है कि जावास्क्रिप्ट के साथ इसे कैसे प्राप्त किया जाए, बस सोच रहा था कि क्या एक साफ सीएसएस-केवल समाधान है? < / पी>

आप एक इमेज का उपयोग कर सकते हैं जिसमें आनुपातिक आकार के साथ आनुपातिक साइजिंग के लिए मदद की जा सकती है (छवियों को आनुपातिक रूप से बढ़ाया जा सकता है कुछ मान के लिए एक आयाम सेट करके और दूसरे को ऑटो) छवि दिखाई नहीं देनी पड़ती है, लेकिन इसे स्थान पर कब्जा करना होगा। 

  .box {position: absolute; नीचे: 0; बाएं: 0; ऊंचाई: 50%; }। आकार-सहायक {प्रदर्शन: ब्लॉक; चौड़ाई: ऑटो; ऊंचाई: 100%; }। खिलाड़ी {स्थिति: पूर्ण; शीर्ष: 0; नीचे: 0; बाएं: 0; सही: 0; पृष्ठभूमि: आरजीबीए (255, 255, 153, .8); }  
  & lt; div वर्ग = "बॉक्स" & gt; & Lt; img वर्ग = "आकार-सहायक" src = "// dummyimage.com/200x100/999/000" चौड़ाई = "200" ऊंचाई = "100" & gt; & Lt; div वर्ग = "इनर" & gt; 1. बॉक्स में तरल ऊंचाई है & lt; br & gt; 2. आईएमजी के पास 2: 1 पहलू अनुपात, 100% ऊंचाई, ऑटो चौड़ाई, स्थिर स्थिति है & lt; br & gt; 2.1 इस प्रकार यह चौड़ाई = 200% ऊँचाई रखता है & lt; br & gt; 2.2 यह बॉक्स के आयाम को परिभाषित करता है & lt; br & gt; 3. इनर बॉक्स जितना फैलता है & lt; / div & gt; & Lt; / div & gt;

उपरोक्त उदाहरण में, बॉक्स, आंतरिक और सहायक सभी समान आकार हैं।


Comments

  1. Dr Hashmi9 March 2018 at 21:59

    Thanks for sharing tips for height gain. I also suggest hashmi heightole xl capsule for height gain. Visit http://www.hashmidawakhana.org/height-gain-natural-supplement.html

    ReplyDelete

Post a Comment

Popular posts from this blog

c# - SignalR: "Protocol error: Unknown transport." when navigating to hub -

-
Image
I am trying to use the ASP.NET signal for the first time - here's what I did: created a new web Has been added to the project and the following signal R packages: I have created the following category: [Hub-name ("chat")] Public class ChatHub: Hub {Public Zero Halo () {Clients.All.hello ( ); }} and the following startup configuration: public partial class startup {public zero configuration (IAppBuilder app) {configure (app); App.MapSignalR (); }} However, whenever I navigate localhost: (port) / api / signalr / chat I get the following error: Protocol error: Unknown transport. I am running a new browser and trying different people so remove it from the API / URL, and just use the localhost: (potter) / signaller / Chat
Read more

class - Kivy: how to instantiate a dynamic classes in python -

-
Using KV lang on my Python code, I have taken a hard time trying to instantiate a dynamic class, the following Consider the code: My test.kv file looks like this: & lt; MyPopup @ popup: Title: 'Hello' size_hunt: (1, .6) Grid layout: ID: RouteGrid column: 2 padding: ['8dp', '4dp', '8dp', '4dp'] Difference: '8dp' label: text: 'some text here' button: text: 'OK' On_press: do_something () & lt; MyGrid & gt;: Rows: 1 Button: Text: 'Show Popup' on_press: root.pop.show () Then import Kivy.app into my test.py: I get the following error: raise Factory Exception ('Uncount Class' '% name) kivy.factory.FactoryException: Unknown class Can anyone tell me how to do this properly, what do I remember? If you need more information please let me know Thank you. Takes a call to the factory before the KV file is loaded, so you want the class to Are not yet in existence. As long as no clas...
Read more

How to exit a wpf application when Application.Current is NULL? -

-
When I need to exit a WPF application I usually use I use the application. Current.Shutdown () But sometimes Application.Current is NULL , I have also tried the environment. Exact (0) but it is not working correctly. WPF application is another way to exit specially when Application.Current is NULL ? This is my code: Public Partial Class Application: Application {Safe Override Zero Start (StartupAventErgus E) {If (Some) {Issue ....} else {Application.Current.Shutdown ()}} system. Diagnostics Process. GateContent Process () Kill (); Anywhere and at any time it terminates your application immediately.
Read more