wake689
January 20, 2021, 10:11pm
1
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
2
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
wake689
January 20, 2021, 10:38pm
4
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
5
CodePen screenshots in Chromium 87 Linux:
1 Like
wake689
January 20, 2021, 10:58pm
6
Ah. It works in Chrome on Windows for me but in Firefox on Windows I get:
wake689
January 20, 2021, 11:33pm
7
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
8
I think the answer may lie in an answer PaulOB gave me here:
OK - my brain is not big enough. I see that the above declaration block positions the second image below the first. And I think
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46%;
object-fit: cover;
}
positions the first image?
But I don’t understand how the relative and absolute positions work in this context (I have looked up what they mean).
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
Erik_J
January 21, 2021, 12:51am
10
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
Ray.H
January 21, 2021, 1:18am
11
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
Erik_J
January 21, 2021, 1:23am
12
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>
3 Likes
wake689
January 21, 2021, 10:41am
13
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
14
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
PaulOB
January 21, 2021, 11:38am
15
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
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.
Further reading :-
Typography - ideal column width
coothead
3 Likes
system
Closed
April 27, 2021, 2:16pm
18
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.