How to resize image the way I want, responsively

wake689 · January 20, 2021, 10:11pm

Hi,

I wonder if PaulOB or anyone else can help with a problem I am having. I have created a codepen to illustrate the issue:

The little chap leaping into the air only occupies a small part of the centre of the image so I thought it would be an ideal image for my purposes.

I have some text which I want displayed in the grid column on the right with the image filling the column on the left.

I want the height of the image to be the same as the height of the text, at all screen sizes and shapes and orientations.

I want the image to be cropped at the top and the bottom to achieve this, with the full width of the picture being used to fill the 40% grid column.

(I will be using breakpoints for a different layout for mobile).

I know that using a fixed image height of 500px is not the right way to go but have left that in there to be altered.

Any help/advice gratefully received. Thank you.

Erik_J · January 20, 2021, 10:24pm

Hi,

Try 100% for the height too, and see if that fits the fluid height better:

img.pic{
  width: 100%; /* of the grid area */
  height: 100%; /* of the grid area */
  border: 3px solid blue;
  object-fit: cover;
  box-sizing: border-box; /* added to keep the total size */
}

wake689 · January 20, 2021, 10:38pm

I tried that earlier - it doesn’t work I’m afraid. It simply shows the whole picture which extends below the bottom of the text. Although I realise now that I didn’t specify this in my original post but I want the bottom of the text to roughly line up with the bottom of the picture. I want the top and bottom of the picture to be cropped to achieve this.

But thank you for reading and for your input.

https://codepen.io/wake6/full/JjRVYdv

Erik_J · January 20, 2021, 10:47pm

CodePen screenshots in Chromium 87 Linux:

Screenshot at 2021-01-20 23-43-20

wake689 · January 20, 2021, 10:58pm

Ah. It works in Chrome on Windows for me but in Firefox on Windows I get:

wake689 · January 20, 2021, 11:33pm

Giving an absolute height in pixels for the container sort of works but is no good if there is anything further on the page:

wake689 · January 20, 2021, 11:41pm

I think the answer may lie in an answer PaulOB gave me here:

I will now read it through carefully.

coothead · January 21, 2021, 12:04am

Hi there wake689,

perhaps this will suit your requirements…

Full Page View:-
https://codepen.io/coothead/full/OJRGMPW

Editor View:-
https://codepen.io/coothead/pen/OJRGMPW

coothead

Erik_J · January 21, 2021, 12:51am

Positioning the image in a div seems to satisfy also Firefox 84 on Linux:

Example using your CodePen code::

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Title</title>
<style type="text/css">
body{
  margin:0;
}
section.container{
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 20px;
  border: 3px solid red;
  height: 400px;
  height: auto;
}
article.art{
  border: 3px solid green;
}
.imgbox{
  position: relative;
  width: 100%;
  height: 100%;
}
img.pic{
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid blue;
  box-sizing: border-box;
  object-fit: cover;
}
</style>
</head><body>

<section class="container">
  <div class="imgbox">
    <img src="https://www.tubbly.co.uk/sas_dev/images/leap.jpg" class="pic"/>
  </div>
  <article class="art">
    <h1>Headline</h1>
    <p>Laura's upset. Laura's upset. </p>
    <p>Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. </p>
 </article>     
</section>
<section>
  <p>more stuff</p>
</section>
  
</body></html>

Ray.H · January 21, 2021, 1:18am

Hi Erik,
I’m getting an overflow scrollbar from the gap:20px on section.container

Try using calc or auto for the grid-template-columns


section.container{
  display: grid;
  grid-template-columns: 40% calc(60% - 20px);
  gap: 20px;
  border: 3px solid red;
  height: 400px;
  height: auto;
}

or


grid-template-columns: 40% auto;

Erik_J · January 21, 2021, 1:23am

Oops! Didn’t notice that in the CodePen.

EDIT) The mended CodePen code:

<!doctype html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Title</title>
<style>
body{
  margin: 0;
}
section.container{
  display: grid;
  grid-template-columns: 40% auto;
  gap: 20px;
  border: 3px solid red;
}
article.art{
  border: 3px solid green;
}
.imgbox{
  position: relative;
}
img.pic{
  position: absolute;
  left: 0;
  top:0;
  border: 3px solid blue;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
</head><body>

<section class="container">
  <div class="imgbox">
    <img class="pic" src="https://www.tubbly.co.uk/sas_dev/images/leap.jpg" >
  </div>
  <article class="art">
    <h1>Headline</h1>
    <p>Laura's upset. Laura's upset. </p>
    <p>Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. Laura's upset. </p>
  </article>     
</section>
<section>
  <p>more stuff</p>
</section>

</body></html>

wake689 · January 21, 2021, 10:41am

Wow! Elegant solution - thank you.

It keeps the bottom of the text nicely level with the bottom of the picture.

If I may be very picky… When my viewport gets towards 1,500px the picture is shown in full with a gap down either side on Forefox in Windows

But thank you very much for reading thinking and replying. I have learned something, as I always do when posting here. As I keep saying, I clearly hve much to learn.

wake689 · January 21, 2021, 10:45am

Excellent. Thank you. I had been coming to the conclusion that the answer lay in postioning but I couldn’t figure it out. I will now disect your code and attempt to remember the approach.

I learn so much here.

PaulOB · January 21, 2021, 11:38am

Yes that was the answer

Specifically this;

Firstly you want the height of the text content to dictate the height of the two images so they match the total height of the text. Although with css (grid/flexbox) we can equalise both columns, the tallest column will always dictate the height of the other column. Therefore when we want an image to only occupy 50% height of the text we can’t simply set the image to 50% height because the browser won’t be able to work out what height that is as that column’s own height will be based on its own content (i.e. its images). It’s a circular reference that CSS can’t resolve (although you may find that the odd browser will attempt to do this). e.g. my height is twice the height of something that is half my height; and the height of the smaller something is half the height of my height!

In order to solve this conundrum I remove the image from the flow with absolute positioning. This means that the height of the right column is solely dependent on the height of the text in the left column as grid makes the equal column automatically.

Or just use a background image instead

coothead · January 21, 2021, 11:43am

Well, that could be prevented by applying a maximum
width to the container…

#container {
    display: flex;
    max-width: 68.75em;
    margin: auto;
    justify-content: space-between;
    background-color: #fff;
 }

…which would also make the text easier on the eye.