spot7.org logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories

Img height in proportion to img width, but img width is in % of parent


This should give you all you need.

var img =
document.getElementById('testImage');

// these vars are numbers representing a length in
pixel
var w = img.width, h = img.height; // displayed
dimensions, change on resize
var nw = img.naturalWidth, nh = img.naturalHeight;
// dimensions of the original image file

var proportion = nh / nw; // proportion < 1 :
'portrait', < 1 : 'landscape'

Since width / height change on resize you have to update them in the moment you need them.


Categories : Javascript

Related to : Img height in proportion to img width, but img width is in % of parent
Flexbox child not reading height/width of parent
The .body parent of .super-thing is display: flex so it's children don't inherit it's height or width if they don't have flex properties. The power of flex compels you! Set flex: 1 on .super-thing so it grows and shrinks with a 1% margin to create a gap. There is no need for a width or height. .super-thing { background-color: white; margin: 1%; box-shadow: 2px 1px 1px #000; flex: 1; }

Categories : CSS
Ways to set div width dynamic width and height
I think this is you want.Just create layout like side menu and container as I created below check the fiddle too. This is an example for your scenario html, body{ height:100%; min-height:100%; } body{ position:relative; margin:0px; } header{ position:relative; height:50px; background:#f00; } aside{ position:absolute; top:50px; border-right:2px solid #ccc; left

Categories : CSS
How to get exact width and height of the div
your "a" is 1000px - since you want the width of the div within the "a" you need to use: $("#a div").width() or if you can have multiple divs - then use :first (or some other selector)

Categories : Javascript
HTML5: Canvas width and height
Almost all size parameters in HTML5 are going to be in pixels. If you're experiencing issues drawing the canvas with your current code, try taking out the self-closing block at the end: <canvas id="myCanvas" width="200" height="300"></canvas> You may also consider viewing the properties of the canvas element as defined by W3 Schools: http://www.w3schools.com/html/html5_canvas.asp

Categories : HTML
Getting width and height from loaded bitmap
There is a similar method working with an InputStream: BitmapFactory.decodeStream. Assuming you have a File with your image (exceptions ommitted) : BitmapFactory.decodeStream(new FileInputStream(myImageFile), null, options); (this method works for any InputStream)

Categories : Android
Recently Add
Disable Satellizer Popup Window Title Bar
Can't load css, js and image with htaccess
Angular Directive to modify embed
IE9 HTML5 video "play" event not fired on second play
AngularJS filter by select with empty options
Correct way to create custom errors in javascript
HTML elements only show after i reload page?
javascript variable returning null
How to use class names?
Custom scroll function - flickering effect
How to compare time with AM PM in JavaScript
Ionic / How to expect a cached view to be refreshed?
How can I pass the current element to a Javascript function in a Knockout.js binding?
Using custom C++ code for a HTML5 project
bootstrap accordion dropdown behind footer
JQuery show /hide div from drop down list change
Move background-position x px to left/right according to mouse movements (starting from background-position:center)
Create and Insert an Input on "Enter"
Cordova Local Notification playing local sound for iOS and Android
Exclude route from express middleware
Loop over random JSON entries using jQuery
Applying form validation of select menu similar to html5 required attribute of
Syntax error, unrecognized expression: [object HTMLDivElement]input:checkbox[name=]:checked
Page keeps loading even after response is fetched
Is There a way to use Document.getTime() From a Certain Time?
How to change x axis format from d3.js line charts
Google Chart: is it possible to use Strings for the x axis?
'angular' is not defined (scripts not linking together)
extract the value of an array in an existing javascript file
Allow only alphanumeric, dash, underscore, and period in string (Javascript)
© Copyright 2017 spot7.org Publishing Limited. All rights reserved.