CSS Changing Aspect Ratio of Fluid Images

Css changing aspect ratio of fluid images

You can wrapp your image in two containers. Give one container height:0 and a padding-top with the percentage you want for the height of your image in proportion to the width. So, for a height of 50% of the width use padding-top:50% and height:0, which - as explained here - will make the height proportional to the width by 50%.

.wrapper {padding-top:50%;height:0;position:relative;}

Inside of that container, you place another container with the following styling:

.inner{position:absolute;left:0;top:0;right:0;bottom:0;}

Now just place your image in the inner container and give it width:100% and height:100%

See fiddle: http://jsfiddle.net/henrikandersson/PREUD/1/
(updated the fiddle)

fluid images inside a fluid container that changes aspect ratio

Use object-fit for images to achieve the same result akin to background-size cover, contain:

.imgFit {
    object-fit: cover;   /* cover, contain */
    display: block;
    width: 100%;
    height: 100%;
}

Use like:

<img class="imgFit" src="" alt="">

How do I get dynamically fluid images depending on browser window aspect ratio?

You could also get the aspect in javascript on a regular basis and then add a class to the body object that would specify if it was 4:3, widescreen, or portrait. Then make it run on an interval in case the window changes size.

Example

CSS

.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }

JavaScript

var getAspect = function(){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var aspect = w / h;

    var 43 = 4 / 3;
    var cssClass = "";

    if (aspect > 43) {
        cssClass = "widescreen";
    }
    else if (aspect === 43) {
        cssClass = "43";
    }
    else {
        cssClass = "portrait";
    }

    $("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};

var checkAspect = setInterval(getAspect, 2000);

How to maintain aspect ratio between 16:9 and 4:3 using CSS?

If I understood the problem right, you want to achieve something like this:

      .iframe {

        border: 1px solid black;

        width: 100%;

        height: 100%;

      }

      .container {

        width: 100%;

        max-width: 130vh;

        position: relative;

        margin: 0 auto;

      }

      .wrapper {

        background-color: #c05046;

        height: 0;

        padding-top: 75%;

        position: relative;

        width: 75%;

        left: 50%;

        transform: translateX(-50%);

        max-width: 640px;

      }

      .image {

        position: absolute;

        top: 0;

        left: 50%;

        transform: translateX(-50%);

        height: 100%;

      }

    <div class="iframe">

      <div class="container">

      <div class="wrapper">

          <img class="image" src="https://i.ytimg.com/vi/PX-0Nrg4Yhw/maxresdefault.jpg">

      </div>

      </div>

    </div>

Centered fluid image with fixed aspect ratio and cropping - 2 overlayed divs

I've altered your Fiddle so that no image is needed. I've changed almost all the code, but what I've basically done, is add a container that will always have the perfect width of max-width: calc(100vw - 60px) and a width of calc(150vh - 180px) (1.5 times what the max-height should be and accounting for the header, footer and the margins).

Then I gave #imagem a padding-bottom of calc(100% / 1.5), meaning that it will get exactly the same height as width, but divided by 1.5 (resulting in a ratio of 2:3.

Hope this solved your problem

---

Related Topics