Adjust the size of an image to fit within a set height row using CSS grid

I have a container with fixed width and height where I want to display an image and some text. My goal is to have the text appear first, followed by the image filling up the remaining space in the container. Check out the image below for reference:

Example Image

Although it seems like this approach should work, the image doesn't respect the height of the row it's placed in:

.container {
  width: 500px;
  height: 300px;
  background-color: green;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 40px;
}

img {
  object-fit: contain;
  width: 100%;
  background-color: red;
}

span {
  background-color: blue;
}

<a href='somelink' class="container">
  <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt="">
  <span>Test</span>
</a>
cssimagegrid

Answer №1

After some trial and error, I finally cracked the code! It seems that enclosing the image in a div AND adding overflow:hidden does the trick. This ensures that the image is properly resized instead of just stretching to fit its container.

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  margin: 0;
}

.container {
  width: 500px;
  height: 300px;
  background-color: green;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 40px;
}

.image-container {
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-color: red;
}

img {
  display: flex;
  flex: 0 1 auto;
  object-fit: contain;
  background-color: red;
}

span {
  background-color: blue;
  color: white;
}
<a href='somelink' class="container">
  <div class="image-container">
    <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt="">
  </div>
  <span>Test</span>
</a>

Answer №2

When setting the height of your text to 40px, be careful with long texts as they may overflow the container. To manage the part of the picture you want to see, consider using the object-position property along with object-fit: cover;

.container {
  width: 500px;
  height: 300px; 
  background-color: green;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 40px;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  background-color: red;
}

span {
  background-color: blue;
}
<a href='somelink' class="container">
   <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt="">
   <span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pretium lectus id turpis. Nulla est. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Pellentesque pretium lectus id turpis. Nullam faucibus mi quis velit. Nullam justo enim, consecte...
   </span>
</a>

.container {
  width: 500px;
  height: 300px;
  display: grid;
  grid-template-rows: 1fr auto;
  background-color: limegreen;
  gap: 20px;
}

img {
  width: 100%;
  height: 100%;
  background-color: red;
  object-fit: cover;
  object-position: right top;
}

span {
  background-color: blue;
  color: white;
  text-align: center;
}
<div class="container">
  <img src="https://cdn.pixabay.com/photo/2017/02/07/16/47/kingfisher-2046453_960_720.jpg" alt="">
  <span>Some text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque pretium lectus id turpis. Nulla est. Maecenas sollicitudin. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Pellentesque pretium lectus id turpis. Nullam faucibus mi quis...
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

Optimizing CSS for Landscape Letter Print Alignment

When attempting to print in letter size and landscape orientation, the two divs fail to align properly. However, when using "@size a4 landscape" for printing, the alignment issue is resolved. What could be missing from my print CSS that would allow them to ...

css

A tutorial on implementing a "Back to Top" button that appears dynamically while scrolling in Angular

I've developed a scroll-to-top feature for my Angular project, but I'm facing an issue. The scroll icon appears immediately upon page load instead of only showing after the user scrolls down. Any ideas or suggestions on how to achieve this? Here ...

htmlcssangulartypescriptscroll

The onclick function in the Navbar div fails to work for inner elements

Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick. The <span> and <i> elements inside the .dropbtn do not respond to clicks ...

javascriptjqueryhtmlcss

How can I adjust the size of my elements to be responsive in pixels

While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...

cssresponsive-design

Styling with CSS to show an image and text on the same line

I would like to show text and image on the same line, with the image slightly above the text. View Demo html img.del { display: inline-block; float: right; cursor: pointer; margin-right: 74% } .astext { text-align: left; margin-le ...

htmlcss

Organizing items in rows with alternating quantities using CSS within a fluid design

Encountering a peculiar issue while attempting to organize items spread across multiple rows, with each row having either 5 or 4 items (alternating between 5 and 4 items per row). However, when the screen width reaches 480px, the layout automatically switc ...

htmlcssresponsive-designcss-float

Taming col-auto in Bootstrap to prevent it from being overly insatiable

In this simplistic example below, I have implemented two columns using the col-auto class, allowing each column to take up the necessary space. .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; o ...

cssbootstrap-5bootstrap-grid

Can an RMD file access a CSS variable?

In my .Rmd file, I am interested in adjusting the style based on whether it is viewed on a mobile device or not. Checking window width with @media in CSS makes this task simple. Let's consider a scenario where there is a root variable --mobile: 1; ...

javacssrr-markdown

What is the best way to add a centered progress spinner on top of an overlay?

Here is a code snippet that includes functionality to append a site overlay as needed. I am currently trying to implement the feature of also displaying an image progress spinner in the center of the screen over the overlay. I would prefer if this spinner ...

jquerycssoverlay

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

Tips for executing a function in the HC-Sticky plugin?

Currently, I am utilizing the HC-Sticky JavaScript plugin and endeavoring to utilize the documented reinit method. However, I am facing difficulty in understanding how to execute it. In this CodePen demo, a basic setup is displayed along with an attempt t ...

javascriptjqueryhtmlcsshcsticky

Picture shown in the sidebar

I'm dealing with a table that has only one row containing text with new-line characters, such as: <td id='line-numbers'> <span class="number" id="1">1</span><br> <span class="number" id="2">123</span>< ...

htmlcss

Utilize a dynamic carousel with interactive lightbox functionality to display a stylish div containing captivating background

Is it possible to add a slick lightbox to a slider that only contains a div with a background image, but the lightbox doesn't display the image? What are your thoughts? $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, ar ...

jqueryhtmlcss

Utilizing React's Conditional Rendering Alongside Bootstrap to Maintain the Layout Intact

I'm currently developing a project using React and Bootstrap that involves incorporating a large bar graph with two smaller boxes, all positioned horizontally together. To visualize how it should appear, please expand the pen window to see them arran ...

javascripthtmlcsstwitter-bootstrapreactjs

Tooltip not appearing when user hovers over it

I need help with displaying tooltips only when hovering over anchor tags. Initially, I have hidden the visibility and want to show it on hover. However, the tooltips are not appearing when I hover over them and there are no console errors displayed. Can so ...

htmlcsstooltip

Stop SVG Text from Rotating using CSS

I designed an SVG circle containing text and now I would like to apply a CSS transform to rotate the SVG, but without rotating the text element. .progress { webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .progress__value { stroke-d ...

htmlcsssvg

Is there a way to adjust the image dimensions when clicked and then revert it to its original size using JavaScript?

Is there a way to make an image in an HTML file change size by 50% and then toggle back to its normal size on a second click using JavaScript? I've attempted to do it similar to the onmouseover function, but it doesn't seem to be working. Any sug ...

javascripthtmlcsstogglegetelementsbytagname

Incorporating a URL into an HTML marquee

As a beginner in coding, I'm currently exploring how to incorporate a link into my marquee. My goal is to eliminate any color change or underline animation as well. Do you have any recommendations? .Marquee { color: #da6fe2; background-color: t ...

htmlcss

Using CSS syntax to target a class within an element distinguished by its unique id

Consider the following code snippet: <div id="dogs" class="content">hello</div> <div id="frogs" class="content">hello</div> <div id="hogs" class="content">hello</div> <div id="logs" class="content">hello</div&g ...

css