What is the best way to increase the height of an image in a grid container beyond the height of

I am currently designing a grid layout to showcase recent articles. Each article includes an image and a brief description. My goal is to have the image taller than the content text block, while ensuring responsiveness across various screen sizes.

Below is the relevant section of my code utilizing Tailwind CSS and Next.js:

https://i.sstatic.net/2JcrodM6.png

<div className="grid gap-2">
        {articles.recentArticles.map((article, index) => (
            <Link className="block rounded-lg overflow-hidden" key={index} href={`/article/${article.urlSlug}`}>
                <div className="p-4 flex items-center justify-center"> { }
                    <Image
                        src={article.image.url}
                        alt={article.title}
                        width={150}
                        height={500} className="h-500 w-150 rounded-md mr-4"
                    />

                    <div className="space-y-2 flex-grow">
                        <h2 className="text-2xl font-bold mb-2">{article.title}</h2>
                        <p className="text-gray-600 mb-4 line-clamp-2">{article.description}</p>
                        <div className="flex items-center justify-between">
                            <p className="text-gray-600">{formatDate(article.createdAt)}</p>
                        </div>
                    </div>
                </div>


            </Link>
        ))}
    </div>
   

My desired outcome is similar to this:

https://i.sstatic.net/Wx5Hl20w.png

I've attempted setting a fixed height for the image element, but have not found success.

I am aiming for a responsive design where the image consistently exceeds the height of the content text block.

Answer №1

I am considering three different possibilities.

  1. Adjusting image dimensions: By increasing the width, the height will also increase proportionally. However, keep in mind that the text portion (title and description on the right) may have fewer characters as the width decreases.
  2. Experimenting with font properties: Try reducing the font size, ensuring the title remains on one line, and minimizing gaps. Be cautious not to make it difficult to read. Consider the example provided; the font size is quite small.
  3. Utilizing 'object-fit' property: This option disregards maintaining the image's original proportions. If you are open to a square or vertical rectangle shape, set your preferred width/height and apply the 'object-fit: cover' property. This makes the image behave like a background, cropping any excess parts without distorting the picture itself.

Please note: I work with vanilla CSS, so I am unfamiliar with Tailwind syntax.

For a visual demonstration, check out this fiddle of plain HTML+CSS implementation.

I hope this information proves helpful!

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

What could be causing the right padding to be overlooked next to the scroll bar, and what steps can be taken to address this

.outer { padding: 50px; } .inner { width: 500px; height: 1000px; border: 1px solid gray; margin: auto; } <div class="outer"> <div class="inner"> <div class="content">qwerty</div> </div> </div> From my ...

Experiencing difficulty adjusting the width of a Tumblr post with JavaScript or jQuery?

Calling all coding experts! I've been working on customizing a Tumblr theme, and everything is looking good except for one issue. I'm struggling to adjust the width of photos on a permalink (post) page. Check out this link: You'll notice t ...

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Wondering why the CSSBaseline of Material UI is causing issues with the background color alignment of React-mentions and seeking a solution (https://www.npmjs.com/package/react-mentions) Check out this setup: https://codesandbox.io/s/frosty-wildflower-21w ...

What's the best way to add animation to the send icon while hovering over the button?

<div class="text-center"> <button [disabled]="btnStatus" class="btn btn-secondary buttonSend" type="submit"> <div [hidden]="btnStatus"> Send Message&nbsp;&nbs ...

What could be causing the background rainbow animation to malfunction?

.colorful { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); animation: change 10s ease-in-out infinite; } @keyframes change-color { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 10 ...

Can you explain the significance of the "row" class in Bootstrap, how it differs from containers, and how it interacts with col-***-*?

I've been browsing through the guide found at http://getbootstrap.com/css/ and I'm having trouble grasping the purpose of the "row" class. I experimented with some examples provided in the guide like: <div class="row"> <div class="c ...

What are the advantages of using clearfix for clearing floats in CSS?

Recently, I encountered an issue with using clearfix to clear the floating effect in CSS. Someone mentioned that it may not be the best technique and suggested using alternative methods. Is this information accurate? If so, what are some other options tha ...

Tips for effectively showcasing div elements

https://jsfiddle.net/qz8hL574/1/ for (var key in table) { if (table.hasOwnProperty(key)) { $('<div class="element"></div>').appendTo('#list'); document.getElementsByClassName("element")[key].innerHTML = ...

Is there a way to deactivate a JavaScript function on a specific webpage using CSS?

I've implemented a JavaScript function that triggers a pop-up alert whenever a user attempts to navigate away from the site by clicking on an external link: $("a[target='_blank']").click( function() { return confirm('Please don&apo ...

Having trouble with react-unity-webgl integration in Next.js project

I've been trying to integrate this code into a Next.js build, but for some reason the game isn't loading on the page and I'm not seeing any errors in the console. I'm completely stumped as to why the game won't load. The tools I&a ...

Button with Circular Design by Tailwind

Is there a way to place a circle inside a button with text positioned to the right of it without overlapping in a centered manner? Take a look at this playground HERE <button class="btn btn-change"> <span class="w-5 h-5 bg-red-5 ...

Prevent the SVG mouseclick event with CSS styling

Is it possible to prevent clicking on an SVG element using CSS? .disabled{ pointer-events: none; } After selecting the SVG element with $(".dasvg"), the console confirms the selection: [ <svg width=​"500" height=​"500" class=​"dasvg">​ ...

I need some assistance, please. Can someone explain why the Bootstrap card is staying aligned to the left in mobile view

I've tried everything, but it's still not working. Can anyone help me out? Here are some photos. BEFORE AFTER When I view the card on mobile, I want it to stay centered. Could there be some missing code that I'm overlooking? I would great ...

Visibility of text compromised when placing transparent button inside input field

After adding a clear button inside the input box in Angular, I am facing an issue where the text in the input box is being overlapped and not fully visible. Below you will find detailed information on this problem. HTML Code <ng-template pTemplate=&quo ...

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

<mat-slide-toggle>Slide Me!</mat-slide-toggle> https://i.stack.imgur.com/p1hzD.png https://i.stack.imgur.com/aCzs1.png Is it possible to customize the toggle-thumb-icon to increase its length and position it at the end of the bar? ...

Leverage CSS variables within the `url('data:image/svg+xml')` function

Here is a CSS snippet I use to create a dashed border around a div: div { width: 100px; height: 100px; border-radius: 16px; background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w ...

Can you conceal the label while also displaying the placeholder?

Within my form, I am using the following code: <div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div> <div id="first-element" class="f-element"><input type="tel" class='ro ...

How can you define & specify parameters for iframe using CSS?

Is there a way to style the parameters of an <iframe> using CSS? I am trying to embed multi-track audio from archive.org. For example, like this: <iframe src="https://archive.org/embed/art_of_war_librivox​&playlist=1​&list_height=200 ...

CSS - Ensuring the second line of text in ul/ol li does not extend further left than the first line

My website features several lists that have this format: > lorem ipsum I am trying to style them like this: > lorem ipsum If anyone can provide guidance on how to rephrase the question I am asking, I would greatly ap ...

Scaling boxes responsively according to screen size utilizing Bootstrap

Creating a portfolio website with a carousel section to display completed projects in a 2x2 grid layout, transitioning to a 1x4 on smaller screens is proving to be quite challenging. After trying various methods from Bootstrap documentation and YouTube tut ...