Calculate the width and height of parent div and apply to image accordingly

Question

I have a parent div which in responsive width and fixed height with some images inside it. On runtime I need a Jquery function to calculate the width and height of the div and apply the width (px) and height (px) parameters to image. i.e my code right now is ```

``` the generated code which I need would be ```

``` Thank you in anticipation

Accepted Answer

Using jQuery you can use `.height()`, `.innerHeight()` or `.outerHeight()`.

The differences are:

- `height()` returns just the height of the element, no borders, no margins and no padding

- `innerHeight()` returns the element height and the padding

- `outerHeight()` returns the element height, the padding and borders

- `outerHeight(true)` returns the element height, the padding, borders and margins

I have more details including output examples using jsFiddle in this post here.

For width you can use `width()`, `innerWidth()` or `outerWidth()`. The same logic applies as with height.

All values are in pixels.

To get the height/width you can use it similar to this:

```
// The below is an example, you need to add your element references as required.

// Use height(), innerHeight() or outerHeight() as needed.
var newHeight = $("#slider-wrapper").height();

// Use width(), innerWidth() or outerWidth() as needed.
var newWidth = $("#slider-wrapper").width();
```

To set the height/width you can use it similar to:

```
// The below is an example, you need to add your element references as required.
var newHeight = $("#slider-wrapper img").height(newHeight);
var newWidth = $("#slider-wrapper img").width(newWidth);
```

Calculate the width and height of parent div and apply to image accordingly

Solution

Problem

Related problems