How to resize image the way I want, responsively

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.

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 */
}
1 Like

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

CodePen screenshots in Chromium 87 Linux:

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

1 Like

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

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

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

I will now read it through carefully.

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

1 Like

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>
2 Likes

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;
2 Likes

Oops! Didn’t notice that in the CodePen. :blush:

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>
3 Likes

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.

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.

2 Likes

Yes that was the answer :slight_smile:

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 :slight_smile:

1 Like

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. :rofl:

Further reading:-

Typography - ideal column width

coothead

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.