css Question posted in
Some basic documentation can be found here.

CSS to "scale" Image to Fit Browser Window height and width

I am generating a static site where the images and set within a responsive "picture frame" so the Mat is the same size on each side, regardless of the image’s aspect ratio. This is working well; however…

I want to ensure that the whole "picture frame" is visible in the browser window. Currently, the frame is sized to the width, meaning tall images scroll off the bottom.

Can someone look at my code and suggest how I dynamically resize the "picture frame" so it is 100% visible in the browser window?

There is a JSFiddle here – link

.frame {
    position: relative;
    width: 100%;
    background: black;
    box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.3);
}

.mat {
    position: absolute;
    background: white;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}

.art {
    position: absolute;
}

.art img {
    width: 100%;
}

.art:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
}
<div class="frame" style="padding-bottom: 115.09%">
  <div class="mat" style="top: 2.1721%; bottom: 2.1721%; left: 2.50%; right: 2.50%;">
    <div class="art" style="top: 11.354%; bottom: 11.354%; left: 13.158%; right: 13.158%;">
      <img src="https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg" />
    </div>
  </div>
</div>

Thanks

Tags:

2

Answers


  1. 0

    We can add width: 100% & height: 100vh to parent div and add width: 100%, height: 100% & object-fit: cover or object-fit: contain as per need.

    This is illustration. Check the link which I have provided and it will help you to understand better & if I have missed something or misunderstood then do share. Thank You.

    Login or Signup to reply.
  2. 0

    Make the image the same size as its container (using grid layout is probably better than absolute positioning). You also don’t need that much nesting, just a border and a padding on the image.

    Here’s a working snippet producing the result you want.

    html, body {
    display: grid;
    grid-template: 100%/ 100%
}

html { height: 100% }

img {
    box-sizing: border-box;
    border: solid 2vmin #000;
    padding: 13vmin;
    width: 100%; height: 100%;
    object-fit: cover;
    box-shadow: 
        0 10px 7px -5px rgba(0, 0, 0, .3), 
        0 0 20px 0 rgba(0, 0, 0 , .5) inset
}
    <img src='https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg'>

    EDIT: Just in case I misunderstood and what you actually want is this:

    html, body {
    display: grid;
    grid-template: 100%/ 100%
}

html { height: 100% }

img {
    place-self: center;
    box-sizing: border-box;
    border: solid 2vmin #000;
    padding: 8vmin;
    max-width: 100%; max-height: 100%;
    box-shadow: 
        0 10px 7px -5px rgba(0, 0, 0, .3), 
        0 0 20px 0 rgba(0, 0, 0 , .5) inset
}
    <img src='https://cw109eu.uk/images/portfolios/recent/231106-44511-1.jpg'>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search