html - How to set the container height automatically maintaining the ratio -

-

मेरे पास img वस्तु एक div वस्तु के भीतर है मैं img (या div ) की चौड़ाई को सेट करना चाहता हूं और अपनी ऊंचाई को स्वचालित रूप से छवि के मूल अनुपात को बनाए रखने के लिए जो भी आवश्यक है, सेट करना चाहते हैं।

< पी> मान लीजिए कि मैं चौड़ाई को 200px पर सेट करता हूं, जो छवि की प्राकृतिक चौड़ाई से कम है। जब मैं ऐसा करता हूं:

HTML 

  & lt; div id = "container" & gt; & Lt; img id = "foo" src = "foo.png" & gt; & Lt; / div & gt;

सीएसएस 

  #foo {width: 200px; }

या 

  # कंटेनर {चौड़ाई: 200px; }

img में मूल अनुपात को बनाए रखने के लिए जो कुछ भी आवश्यक है, उसके लिए ऊँचाई सेट है, लेकिन बाहरी div ऊंचाई सेट है आंतरिक छवि की प्राकृतिक ऊंचाई तक, और ऊपर और नीचे के हाशिये आंतरिक img और बाहरी div के बीच डाली जाती हैं।

मुझे बाहरी कोड चाहिए img के मूल अनुपात को बनाए रखने के लिए जो कुछ भी जरूरी है उसे

और img < / कोड> शून्य हो जाएगा मैं यह कैसे कर सकता हूं?

इस कोड की कोशिश करें 

  & lt; div वर्ग = "कंटेनर" & gt; & Lt; img src = "demo.jpg" alt = "" / & gt; & Lt; / div & gt; शरीर {मार्जिन: 0; }। कंटेनर {चौड़ाई: 200px; सीमा: 1px ठोस लाल; कंटेनर की ऊंचाई की जांच करने के लिए // टीएमपी जोड़ा गया। कंटेनर आईएमजी {डिस्प्ले: ब्लॉक; चौड़ाई: 100%; }

Comments

Post a Comment

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

-
I have written a simple httprequest / response code and I am getting this error below: I used to type in my classpath httpclient, httpcore, common -Codecs and general logging. I am very new to Java and I do not know what's going on here. Please help me. code: import org.apache.http.client.HttpClient; Import org.apache.http.client.methods.HttpGet; Import org.apache.http.HttpResponse; Import org.apache.http.impl.client.HttpClientBuilder; Import org.apache.http.Header; Import org.apache.http.HttpHeaders; Public class UnshorteningUrl {public static zero main (string [] args throws exception {HttpGet request = zero; HTTP Client Client = HTTP ClientBuilder.credit (). Build (); Try {Request = New HTTP Gate ("trib.me/1lBFzSi"); HttpResponse httpResponse = client.execute (request); Header [] header = httpResponse.getHeaders (HttpHeaders.LOCATION); // Preconditions.checkState (headers.length == 1); String new url = header [0] .getValue (); System.out.println ("new url...
Read more

c# - Chart control: Design messed Up after clearing and re-adding Y-Values -

-
Image
The day was struggling with this. I have three series on a chart that looks like this. Note: I am using vanof control. They are being added on the basis of input from the calculation. I am using this code to add value to each series. this.chart1.Series ["green"]. Points. AddY (greenvalue); This.chart1.Series ["totalsaving"] Points.AddY (totalsavingvalue). This.chart1.Series ["blue"] Points.AddY (bluevalue). I have set series properties like this. Both green and totalsaving are set to StackedColumn, the blue chart is set to the column for type. I started then To do is a button that brings the user back to the input field and then I am using this code to clear the series values ​​on the start code. chart 1. Series ["totaling"]. Points. clear (); Chart1.Series ["green"] Points.Clear () .; Chart1.Series ["blue"] Points.Clear () .; The same calculation click above is being calculated for the calculation of th...
Read more

javascript - Bootstrap Modal won't close, previously appended to Body using JQuery -

-
So I go to all the difficulties to get a modal and working text box, then I close it Go to the AJAX success event, but nothing seems to work I'll try. var id; Var refundarm = ''; Var Token = $ ("Meta [name = 'CSRF-Token']"). Attr ('content'); $ ('[Data-Toggle =' Model ']'). Find ID from ('click', function (e) {var checkEventCount = 1; var prevTarget; // Models href attribute ID = $ (this) .attr ('href'). (/ [^ 0-9.] / G, ""); $ ('# new_refund_modal' + id) .on ('show.bs.modal', function (e) {if (prevofarget == 'undefined' || (CzechEventCount == 1 & amp; Amp; e.target! = PrevTarget)) {prevTarget = e.target; CzechEventContent ++; E.Pravant Default (); $ (E.T. ('$'), ('$'), () () () () (Value)) = Refund Amount (Refund amount = $ (this) .val ();}});} And if (e.target == Navigate & amp; amp; Number == 2) {checkeventcount--;}});}); $ ('Refund-deposit-BTN...
Read more