image - Specifying width and height as percentages without skewing photo proportions in HTML -


I was thinking that in the width and height attributes, can I specify width and height as percentages?

Okay, I think it's clear, because when I try, it changes its shape, but it seems to obliterate the quality of my image.

Here is an example of my markup with certain properties:

Now, trying to measure this scale, say half by percentage:

I get absolutely something:

I think that I only consider my percentage markup or something wrong because my second and third example has a visually different difference.

Update: Thank you to all for all helpful posts!

I actually really created a pat for JP suggestion, because with a snippet he has suggested, I can actually modify the selector and all of my Fancybox affected images such as- Then: 

  apply to $ ('img.FancyBox'). Each (function () {$ (this) .Wide ($ (this). Width () * 0.25);});

It's so great!

You can check the live effect here on your site:

It is working very well, considering the fact that once I get it done in my SQL If I connect to Server DB, then I can apply a jQuery snippet to all Fancy Box square images on my product pages.

Thanks guys!

In your second example, the percentage width is actually applying for the container, your Lt; Img & gt; is inside, and not the actual size of the image, assuming that you have the following markup:

Your resulting image will be 500 pix width and 300 pixels tall.

Change the size of jQuery

If you are trying to reduce 50% of your width, you can do it with a snippet of jQuery Can: 

  $ ("img") .each (function () {var $ img = $ (this); $ img.width ($ img.width () * .5) ;});

Just make sure that you first remove any height / width = 50% attributes.


-

Comments

Post a Comment

Popular posts from this blog

Eclipse CDT variable colors in editor -

I hope this is a good question to ask here. This programming is related, so I thought it would be better than the superuser, so I am using the CDT C ++ Eclipse plugin. I know how the editor changes colors for some things But is there a way to do that all the variables are different colors? For example in KDEValue, it sets the local variables and square variables in different colors and bold square squares. Can I copy it to CDT? Eclips provides some level of color customization for text editor syntax You can see it on the following: There are many elements, including the Window> Preferences> C / C ++> Editor> Syntax color code that can be changed, assembly, Comments, Preprocessor and Doxian Under the code, it is possible to change the color of some variable types, such as global variables, local variable announcements, local variable references, and parameter variables. But I do not think the code is capable of changing the color of each variable declared....
Read more

AJAX doesn't send POST query -

$ (दस्तावेज़) .ready (function () {function ajaxselectrss (rssurlvar) {var ajaxRequest; // वेरिएबल जो अजाक्स को संभव बनाता है! कोशिश करें कि {// ओपेरा 8.0+, फ़ायरफ़ॉक्स, सफारी अजाक्स अनुरोध} = नया एक्सएमएलएचटीपीआरइवेस्ट ();} कैच (ई) {// इंटरनेट एक्सप्लोरर ब्राउज़र्स {ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");} पकड़ो (ई) {try {ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");} कैच (ई) {// कुछ गलत चेतावनी ("आपका ब्राउज़र तोड़ दिया!"); वापसी झूठी;}}} // एक बनाएं फ़ंक्शन जो सर्वर से भेजे गए डेटा प्राप्त करेंगे ajaxRequest.onreadystatechange = function () {if (ajaxRequest.readyState == 4) {var ajaxDisplay = document.getElementById ('news'); ajaxDisplay.innerHTML = ajaxRequest.responseText;}} / / Var rssurlvar = $ (this) .attr ("title"); var queryString = "rurl =" + rssurlvar; var urltofile = "rssget.php"; ajaxRequest.open ("पोस्ट", urltofile, सच); ajaxRequ Est.setRequestHeader ("सामग्री-प्र...
Read more

wpf - Custom Message Box Advice -

Well, I'm using a custom window box that comes with some custom control boxes that accompany the text The producers who are displayed are called. I have a defined event, which has been subscribed through the original class, it gets burnt when clicking on the button. However, I can not see how to use it effectively, I would like to return one yes, whether yes or not, but obviously my code will continue to execute, so this Below is some example code to clarify the problem that the method has subscibed by clicking on the button. Message box window Public partial class custom message box: window {public representative message messagebox object sender, event events e); Public event messagebox handler messagebox document; Public Customs Box () {Initial group (); } Public Customsbox (String Message) {InitializeComponent (); This.txtdescription.Text = Message; } Public Customsbox (String Message, String Title, String First BTNtext) {Initialization (); This.lbltitle.Content =...
Read more