Scaling Object Element Height Proportional to Width + Constant with CSS

Scaling object element height proportional to width + constant with CSS

Here is a fiddle that uses slightly different numbers, but is set up to illustrate a "proportional to width plus some constant value" idea for the height. It is based on your original idea, with a tweak. It seemed to test fine in IE8+, Chrome, Firefox.

Essentially, the code you would need is probably this:

#video-container {
    position:relative;
    width: 100%;
    height: 0px;
    padding-bottom: 56%; /* proportional scaling */
    padding-top: 50px; /* add constant */
}

#video-container object {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

CSS - Scale element proportionally if window viewport become too small

If anyone still get here, I didn't find solution in css only but did a trick with css+js.

css:

:root {
    --trickyScale: 1;
}

#whereverYouNeed{
    transform: scale(var(--trickyScale));
}

js:

window.onresize = function() {
    let container = document.getElementById("whereverYouNeed");
    const minScale = 0.75;
    const maxScale = 1;
    let scale = Math.min(window.innerWidth / (container.offsetWidth + 8),
            window.innerHeight / (container.offsetHeight + 8));
    scale = Math.min(maxScale, Math.max(minScale, scale))
    document.documentElement.style.setProperty("--trickyScale", scale);
}

Demo JsFiddle

Is it possible to scale an image proportionally both on width and height based on a fixed container?

One way is to use object-fit:

img {
  object-fit: contain;
  width: 200px;
  height: 200px;
}

JSFiddle Demo: https://jsfiddle.net/t75cxqt0/2/

Scaling a div but keeping it contained within a certain width and height

You can set the following css on the container to add scroll bars when the content expands past the fixed size.

"overflow:auto" 

JSFIDDLE: http://jsfiddle.net/biz79/sn6wyv49/5/

Click the button to change the image size.

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>

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

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/

---

Related Topics