Open Data

User login

Using CSS to proportionally scale an image with a width and height set in source

Using CSS to proportionally scale an image with a width and height set in source

Submitted by Benjamin Melançon on August 28, 2017 - 4:20pm

in

So far all i have is links to many wrong directions that seem to require throwing more HTML code around the image:

http://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height

http://stackoverflow.com/questions/22039845/scale-and-position-div-relative-to-image-with-100-height

http://stackoverflow.com/questions/9219005/proportionally-scale-a-div-with-css-based-on-max-width-similar-to-img...

http://stackoverflow.com/questions/8894506/can-i-scale-a-divs-height-proportionally-to-its-width-using-css

http://wellcaffeinated.net/articles/2012/06/26/proportional-resizing-of-web-page-elements-using-only-css

This one:
http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements

http://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use

Searched words:

scale div height with absolutely positioned image proportionally scale a div CSS fake image for size proportion

Comments

Post new comment

Your name: *

E-mail: *

The content of this field is kept private and will not be shown publicly.

Homepage:

Subject:

Comment: *

You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
Web page addresses and e-mail addresses turn into links automatically.
Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <img> <blockquote> <small> <h2> <h3> <h4> <h5> <h6> <sub> <sup> <p> <br> <strike> <table> <tr> <td> <thead> <th> <tbody> <tt> <output>
Lines and paragraphs break automatically.

More information about formatting options

Notify me when new comments are posted

All comments

Replies to my comment

By submitting this form, you accept the Mollom privacy policy.

Leave this field blank:

Agaric?

Agaric makes powerful web sites for people who do things. As a collective of skilled workers, Agaric collaborates with you and open source free software communities to develop tools and build platforms that meet your needs.
How we can help you? Please ask Agaric!

Agaric Design Collective

P.O.Box 241
Natick MA, 01760
U.S.A
+1-774-286-1770
Email

Copyright

Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 Unported License.