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

Powerbuilder 12.1 and DataWindow in Design vs Debug and Executable/Runtime -

-
I have a very strange situation with Powerbuilder 12.1. I have two issues that can be related - mainly because this is the exact same data window report. Problem # 1: You can not see the contents of Detavindo any and went nowhere, lost the ability to debug and display content Detavindo at runtime during the debug and runtime. But when you go into the data window in design mode, it prompts for the values ​​of those parameters, the content is only displayed, it is okay. Edit: Solve. This is due to a powerbiller that uses an integer rather than a long variable. The identity identifier in the database exceeds the upper limit of a PowerBuilder 16-bit integer (32767). I updated the logic for longer use, and resolved this problem # 1. ISSUE # 2: When I run the report code using the same data window mentioned in issue # 1 above, in debug mode, to create a new report file, this work Done - only in DEBUG mode Runtime failure - I got an error -1 during the runtime for the exact same...
Read more

css3 - HTML Block Anchor element only half clickable in Chrome -

-
I ran into an awkward CSS problem in Chrome, I made a pen as an example: .flip {status: relative; Display: Inline-block; Vertical-alignment: top; Width: 90px; Height: 94px; Border: 4px solid white; } .flip .card {width: 100%; Height: 100%; Line-height: 86px; Text align: center; Webkit-conversion-style: protected-3D; -MOZ-Transform-Style: Protected-3D; -MMS-conversion-style: protection-3D; -O-conversion-style: protected-3D; Conversion-style: protection-3d; -WebKit-Infection: 0.5s; -Mozy-infected: 0.5s; -MM-Infection: 0.5s; -O-Infection: 0.5s; Infection: 0.5s; } .flip .card .face {width: 100%; Height: 100%; Z-index: 2; Font size: 1.5em; Webkit-Backfiest-Visibility: hidden; -MOZ-BACKEX-visibility: hidden; -MM-Backup-visibility: hidden; -O-Backfesses-visibility: hidden; Backfirst-visibility: hidden; } .flip .card .back a {display: block; White color; } I have created some div inside the hyperlinks. I have set the display mode to block, so the link should be spread across the ar...
Read more