Placing a picture within a grid

Hi, I'm new to "programming" and seeking assistance here on stackoverflow.

I'm encountering a slight issue trying to fit an image inside my grid layout.

For example, when I have an image with a specific size, it works fine. However, if the image is slightly larger or in a different format (such as 16:9 instead of 9:16), it doesn't display properly within the grid - neither fitting fully nor getting cropped.

Desired Outcome

Current Result

I am using identical HTML code and CSS for both grids; the only variance is in the image itself. My setup includes Bootstrap along with some custom CSS.

The CSS Styling

.grid {
position: relative;
clear: both;
margin: 0 auto;
max-width: 1000px;

list-style: none;
text-align: center;
}

.grid figure {
position: relative; 
overflow: hidden;
margin: 10px 0;
height: auto;
text-align: center;
cursor: pointer;
}

.grid figure img {
position: relative;
display: block;
min-height: 100%;
width: 100%;
opacity: 0.8;
}
<div class="gallery">
    <div class="container">
        <div class="gallery-grids">

            <div class="col-md-4 gallery-grid">
                <div class="grid">
                    <figure  class="effect-roxy">
                        <a  class="example-image-link" href="/images/fotos/gal1.jpg" data-lightbox="example-set" data-title="In lacinia pharetra ipsum vel dapibus. Ut vitae tristique nisi, mattis pellentesque elit. Proin mollis sed nisi ac sodales.">
                            <img src="/images/fotos/gal1.jpg" alt="" />
                            <figcaption>
                                <h3>Maecenas <span>lacus</span></h3>
                                <p> Aenean fermentum nisl ac imperdiet commodo</p>
                            </figcaption>   
                        </a>
                    </figure>
                </div>
            </div>
    
            
            <div class="clearfix"> </div>
        </div>
    </div>
</div>

htmlcssimage

Answer №1

In my opinion, there are two possible solutions for this situation. The first option is to incorporate images as a background using the cover property. Alternatively, if the images are coming from an img tag, you can use the following CSS:

img {
    object-fit: cover;
    object-position: center;
}

It's important to note that this method may not be compatible with older versions of Internet Explorer.

Answer №2

To achieve a trim effect in CSS, you can define a new class like this:

div.trim {
max-height:292.2px;
max-width: 350px;
overflow: hidden;

}

Afterward, insert a wrapping div outside the image container to apply the trim

<div class="gallery">
    <div class="container">
        <div class="gallery-grids">
            
            <div class="col-md-4 gallery-grid">
                <div class="grid">
                        <figure  class="effect-roxy">
                            <div class="trim" >
                            <a class="example-image-link" href="{$product.image}" data-lightbox="example-set" data-title="">
                                <img src="{$product.image}" alt="" />
                                <!--<figcaption>
                                    <h3>Maecenas <span>lacus</span></h3>
                                    <p> Aenean fermentum nisl ac imperdiet commodo</p>-->
                                </figcaption>
                            </a></div>
                        </figure>
                    
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</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

Dynamic navigation experiencing erratic behavior when using display flex

I attempted to enhance my previous projects by converting them into flexbox. However, I ran into an issue where the ul element was displaying as a block. To fix this, I used JavaScript to change it to display flex. Here is the fiddle: // JavaScript co ...

javascripthtmlcssnavigationflexbox

Ensure that there are three unique JS code blocks in a single JS file, and avoid repetition of any block if it appears more than three times on

In my HTML page, I have 3 distinct blocks of code named block-1, block-2, and block-3 located in the file script.js. This script is called three separate times within the same page. I want to ensure that each block is executed only once based on the order ...

javascriptjqueryhtml

"Utilize Selenium to navigate and select a menu option with a

In my dropdown menu, I am trying to use Selenium to move the mouse to the Documentation menu item and click on the App Configuration option within it. The mouse hover function is working properly, but I am unable to click on the App Configuration element. ...

javajavascripthtmlselenium

Issue with web form layout and heading malfunction

I'm experimenting with creating a form and dynamically setting the pattern and title fields using JavaScript. I am facing an issue with the current code as it is preventing me from entering anything into the form field, and displaying an error message ...

javascripthtml

Making an API call using jquery and getting an empty response

I've been struggling to tweak an API call to load via jQuery after the page has loaded. While someone else assisted me, I still can't seem to get it working. The code is in PHP, and I'm not entirely sure if the syntax is correct. - Take a ...

jqueryhtmljsonajaxapi

When working on a small screen, Bootstrap generates divs one by one

Hey there! I've been working with bootstrap CSS library version 5.1.3 and I'm trying to create a simple card layout where there's an image on the left side and text on the right side. Everything looks great on a large screen, but I'm st ...

htmlcssbootstrap-5

Variations in Angular scope variable behavior

Code Snippet in HTML <input ng-model="test1.param"> <input ng-model="test2"> Code Snippet in Controller $scope.test1 = { param: null }; $scope.test2 = null; Upon entering text in both input fields: The value of $scope.test1.param changes ...

htmlangularjs

Is jQuery the solution for tidying up messy HTML code?

Is there a way to clean up this markup using jQuery? <span style="font-size:19px"> <span style="font-size:20px"> <span style="font-size:21px"> Something </span> </span> </span> I'm looking to tra ...

jqueryhtml

Update the variable obtained from the user input and insert it into a new container depending on the input value

In reference to my previous inquiries, I refrain from adding more details to avoid confusion since it already received numerous responses. While I can successfully retrieve input from a text field with the ID 'test' and display it in the 'r ...

javascripthtml

The CSS formatting is not being properly applied within the innerHTML

I have a scenario where I am trying to display a Bootstrap card using innerHTML in my TS file, but the styles are not being applied to this content. I suspect that the issue might be because the styles are loaded before the component displays the card, cau ...

javascripthtmlcssangulartypescript

Issue with displaying SVG files in VS Code using "Live Server" plugin

Recently, while updating my portfolio site, I encountered an issue with an image in SVG format. Surprisingly, when opening the page using VS Code's "Open with Live Server" feature, the image wasn't previewed. However, if I accessed the same page ...

htmlcssvisual-studio-code

Steps for rearranging the Bootstrap carousel

I am looking to rearrange the carousal indicators so that they show up below the caption. You can view a demonstration of the carousel in action by visiting the following fiddle: <pre> https://jsfiddle.net/w1jjeh7L/ </pre> My goal is to a ...

jqueryhtmlcsstwitter-bootstrap-3

Event follows activation of trigger click

I've already gone through this post on Stack Overflow about triggering an action after a click event, but none of the solutions I've tried so far have worked. Let's say I have a menu on my webpage like this: <ul class="nav nav-tabs"&g ...

javascriptphpjqueryhtml

Page resizing is disabled in Chrome after an Ajax load

I've been tirelessly working on the CSS for a website I'm building, and I've encountered a strange issue that only seems to affect Chrome. Firefox and Internet Explorer work perfectly fine. I am using jQuery to load HTML stubs and a signifi ...

javascriptjquerycssajaxgoogle-chrome

Canvas ctx.drawImage() function not functioning properly

I've encountered an issue while trying to display images in a canvas using my rendering function. Here is the code snippet: function populateSquareImages(){ for(var i = 0, ii = squares.length; i < ii; i++) { if(squares[i].hasImage) { ...

javascripthtmlcanvasdrawimage

PHPMailer encountered a syntax error while processing the command 'composer install'

Attempting to implement PHPMailer on GoDaddy for the first time, encountering an error message; Parse error: syntax error, unexpected 'install' (T_STRING); when trying to run composer install. I've searched through other resources and tinker ...

phphtmlphpmailermail-server

Developing a website with all features and functionality using only traditional coding techniques

When I mention "Vanilla Coding", I mean websites that rely solely on HTML, JavaScript, and CSS without any server side coding like PHP or ASP. I've noticed there are many websites out there that seem to function perfectly fine without using common se ...

javascripthtmlcssclient-side-scriptingserver-side-scripting

In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element. <h1> <div id="vticker"><ul>...</ul></div> Some other headline text </h1> My goal is to have the vertica ...

javascriptjquerycssvticker

Tips on accessing the v-model value with a parameter in VUE

Looking to access the v-model value using a parameter, I attempted the following code: <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click=&q ...

javascripthtmlvue.js

Guide on removing the <hr/> tag only from the final list item (li) in an Angular

This is my Angular view <li class= "riskmanagementlink" ng-repeat="link in links"> <h3> {{link.Description}} </h3> <a> {{link.Title}} </a> <hr/> </li> I need assistance with removing the hr tag for the l ...

javascriptjqueryhtmlangularjs