Set Width According to Height

Set width according to height

There are two techiques I am aware of to keep the aspect ratio of an element according to it's height :

When height is relative to the viewport :

You can use vh units :

div {

  width: 75vh;

  height: 75vh;

  background:darkorange;

}

<div></div>

Set height as a ratio of width with only css

Use viewport-width (vw) for defining width in the height property:

width: calc(100% - 20px)
height: calc((100vw - 20px) * 0.5625) /*16:9 aspect ratio*/

The viewport is the visible area of the web page.

Its full size is 100vw * 100vh, where vw and wh are the viewports size units.

Thus one "vw" is equal to 1% of the web page's currently visible width.

More can be found at: Viewport units: vw, vh, vmin, vmax

Height equal to dynamic width (CSS fluid layout)

Using jQuery you can achieve this by doing

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Check working example at http://jsfiddle.net/n6DAu/1/

Setting the width depending on the height of its parent

Addressing your specific, yet not full, problem:

I want a dynamic square element that has width and height = x where x = parent's height.

The dynamic square can be an image, and the parent a div.

<div class="parent-container">
    <img class="image" src="{{imageUrl}}" />
</div>

Now for this setup you give the parent a desired height and tell the element (image) to take it all. Like this:

.parent-container {
    height: 400px;   
}

.image {
    height: 100%;
}

This way, the width is not of your concern.

---

Edit

Modifying the CSS to this:

.parent-container {
    height: 400px;
    overflow: hidden;
}

.image {
    height: 70.92%;
    position: relative;
    transform: translate(-50%, 0)rotate(-45deg);
    top: 14.4%;
}

Should address the "Full Problem".

Please, mind that the height and top values are rough calculations and should be re-carried out.

The fiddle to boot: https://jsfiddle.net/0pok1bf0/

Maintain div aspect ratio according to height

You can use an image that has the desired proportions as to help with proportional sizing (images can be scaled proportionally by setting one dimension to some value and other to auto). The image does not have to be visible, but it must occupy space.

.box {

  position: absolute;

  bottom: 0;

  left: 0;

  height: 50%;

}

.size-helper {

  display: block;

  width: auto;

  height: 100%;

}

.inner {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(255, 255, 153, .8);

}

<div class="box">

  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">

  <div class="inner">

    1. box has fluid height<br>

    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>

    2.1 it thus maintains width = 200% of height<br>

    2.2 it defines the dimensions of the box<br>

    3. inner expands as much as box

  </div>

</div>

How to use CSS to set height of image the same as width

It depends on the aspect ratio of the image.

1. If you want to stretch the image to a square: since the container <div> is 50% of the whole screen. You could've written it as width: 50vw; (50% of the viewport width). The same for your image: width: 50vw; and to keep height the same as the width.:

.col-sm-6 img {
  width: 50vw;
  height: 50vw;
}

2. If the image is a square, just adjust width. Height will automatically adapt. Since you must be using Bootstrap (guessing from the class name col-sm-6).

3. If the image is always panoramic:

.container {

  width: 50vw;

  height: 50vw;

  border: 1px solid lime;

  overflow: hidden;

}

.container img {

  height: 100%;

  min-width: 100%;

}

<div class="container">

  <img src="http://www.w3schools.com/css/img_lights.jpg">

</div>

css width same as height

The only CSS way of doing this at the moment (AFAIK) is using viewport relates values (vh / vw )

Support is not great at the moment: http://caniuse.com/viewport-units but here is a quick demo

JSFiddle

CSS

.box {
    background-color: #00f;
    width: 50vw;
    height:50vw;
}

The box is responsive but will always remain square.

Pure % values will not work as height:100% does not equal width:100% as they refer to different things being the relevant dimensions of the parent.

css Image with fixed width and auto adjust height

If you have fixed size on div you can just set height/width of img to 100%.

div {

  width: 150px;

  height: 50px;

  border: 1px solid black;

}

img {

  width: 100%;

  height: 100%;

}

<div>

  <img src="http://cdn2.spectator.co.uk/files/2016/04/iStock_000069830477_Small.jpg">

</div>

---

Related Topics