Grid Arrangement Featuring Consistently Sized Images

I am struggling to create a grid layout for posts where the images maintain the same dimensions regardless of their size. I just can't seem to crack it. For example, whether it's a square image or a rectangle image, they should appear in the same dimension.

html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .blog-container {
            width: 90%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 1rem;
            margin: 0 auto;
        }

        img {
            max-width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
<div class="blog-container">
        <div class="post">
            <div class="img">
                <img src="pic1.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic2.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic1.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
        <div class="post">
            <div class="img">
                <img src="pic2.jpg" alt="">
            </div>
            <div class="content">
                <h2>Post title 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sagittis ex eu dolor auctor, bibendum luctus turpis feugiat.
                    Maecenas porttitor felis purus. Maecenas neque libero, tristique in mattis ac, suscipit non turpis.</p>
            </div>
        </div>
    </div>
This is what I am aiming for https://i.sstatic.net/ysIC5.jpg

But this is what I currently have https://i.sstatic.net/wr09j.jpg

csscss-gridgrid-layout

Answer №1

To adjust the height of the image container, simply target the element with the class 'img'.

Insert the following code into your CSS stylesheet:

.img {
    height: 400px;
    width: 100%;
}

Answer №2

To start, establish a fixed width for the image and then eliminate the object-fit attribute.
Revise the image styling to:

        img {
            width: 100%;
            height: 200px;
            display: block;
        }

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 is the best way to add three dots at the end of text when it exceeds the available space?

What CSS property is utilized to display three dots at the end of text when it overflows? ...

htmlcss

The specified MIME type (text/html) is not compatible with stylesheets

When attempting to link a css file to my express-handlebars file, I encountered the following error: The style from 'http://localhost:4000/cs366/style/draft.css' was refused due to its MIME type ('text/html') not being a supported st ...

cssnode.jsexpresshandlebars.jsexpress-handlebars

Is it possible to have one div layer on top of another?

On my website, I have a line of text that is revealed when a dropdown arrow is clicked. However, there are certain pages where the divs extend beyond this single line of hidden text. For example: https://i.sstatic.net/2a6YB.png I need the green div (nor ...

htmlcss

Struggling to align a box perfectly to the right within an AppBar

I'm struggling with aligning the box containing user info to the right edge of my MUI App bar. It seems to be stuck at the end of the last box instead of going all the way to the right. Can anyone help me achieve this? https://i.stack.imgur.com/uJ1on. ...

cssmaterial-ui

Having difficulty getting the sign operator to show up in a text field

Whenever the ADD div is clicked, "+" should be displayed on the textbox. The same goes for SUBTRACT, MULTIPLY, and DIVIDE. However, I am struggling to make the operators show on the textbox. Here is what I have managed to come up with so far. <!D ...

javascripthtmlcss

What is the best way to add a line break to a menu item?

Looking for some assistance with Angular Material here. I am trying to design a menu that includes an item with two lengthy paragraphs, but the text is getting truncated and only showing the first paragraph. If anyone could offer guidance or help, it woul ...

htmlcssangularangular-materialmenuitem

The HTMLEditor from ASP.NET AJAX Control Toolkit is not appearing correctly on the page

My experience with the ASP.NET AJAX Control Toolkit HTMLEditor has been less than satisfactory. The toolbar layout is not being displayed correctly, with what should be a 3-line toolbar appearing stretched out to 9 lines. ...

asp.nethtmlcssasp.net-ajax

Conceal the pseudo element when clicked

Running a WordPress site, I have a button on the home page that is set to load more posts when clicked. I wanted to add a touch of design by including an upside-down caret next to the text "load more posts" using pseudo-elements. While I successfully achie ...

csswordpressonclickpseudo-elementpseudo-class

In certain cases, Bootstrap Grid may initiate a new row from the right side

Occasionally, when the last grid height differs from the others, a new grid will start from the right side in the next row. This is illustrated clearly in the image below. https://i.sstatic.net/Kjj25.jpg I have implemented <div class="col-xs-6 col-sm- ...

phpjqueryhtmlcsstwitter-bootstrap

unable to load()

I am currently in the process of converting frames to div elements. My approach involves using jQuery's load() method, but I have encountered an error that has me stumped. The code snippet below is where the issue resides. Any assistance would be grea ...

jqueryhtmlcss

the width of the table body is narrower than the table itself

I'm working on a table that has a fixed first column and needs to be vertically scrollable. I'm almost there with my CSS code, but the table rows are not as wide as the columns and I'm unsure why this is happening. .table th:first-child, ...

javascripthtmlcss

Issues with the functionality of the login page's HTML and JavaScript

Recently, I attempted to create a login page with the following code: const loginForm = document.getElementById("login-form"); const loginButton = document.getElementById("login-form-submit"); const loginErrorMsg = document.getElementById("login-error-m ...

javascripthtmlcss

Display a large feather icon on the left side with the title and description positioned on the right side

I'm trying to achieve a flex-style UI that resembles this design: https://i.sstatic.net/2mFrm.png So far, I've managed to split the UI using col-5 col-2 col-5 classes from Bootstrap and utilize flex to create the col-5 UI sections (left and rig ...

htmlcssbootstrap-5

Is there a way to locate ComputedStyle elements using Nokogiri?

I am currently using Ruby along with Nokogiri to parse through HTML documents. I am looking to select all nodes that match a CSS class with the style attribute display: none, but the CSS class is unknown in advance. For example: <html> <body&g ...

cssrubynokogiri

Tips for concealing broken images in jQuery/JavaScript when generating dynamic content

Is there a way to hide the broken images in this dynamically generated HTML code using JavaScript? Unfortunately, I don't have access to the source code itself. I'm new to JQuery and could really use some assistance. Below is the snippet of the ...

javascriptjqueryhtmlcssimage

Troubleshooting CSS problems with positioning 3 fluid div elements

I am in need of 3 dynamic div containers. container for main content image display container that changes size container on the side with changing width The issue I am facing is that the text needs to be below the image container which has a wider width ...

htmlcss

I am on the hunt for a unique jQuery or CSS selector to resolve a specific problem

I need assistance finding a jQuery or CSS selector for a specific issue. Here is the code snippet: <div class="parent"> <div class="grid1"> <p>grids have also p</p> </div> <div class="grid2"> <p& ...

jquerycssselector

What is the best way to center all of my list items so that they are aligned correctly?

I have created a spec table for the Watch 4 using this code snippet: <div class="specs"> <ul class="info"> <li>Size</li> <li>44 mm</li> </ul> </div> < ...

htmlcss

Site optimized for mobile devices

I need to create a website that is optimized for mobile devices like Android, iPhone, and Blackberry, as well as desktop and tablet. The screen resolutions of these devices can vary greatly. My supervisor has suggested developing one site that can adjust ...

phpcss

Delayed response of text effects in JQuery on page load

Within my rails app, I have the following code snippet: window.onload = -> $("#mycontainer").typewriter() $("#div1").fadeIn("slow") This code snippet interacts with the following block of content: <blockquote class="pull-left"> < ...

javascriptjqueryhtmlcssruby-on-rails