I'm attempting to resize my images to fit within the container, but instead they appear enlarged

I'm struggling to get my images to resize based on the container size, especially when viewed on tablets or phones. The current result is that the images are too zoomed in and I can't figure out what's causing this issue.

<div class="ps-section--homeCenter" style="display:grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 213px 213px; grid-gap: 10px; padding:0; margin: 0; box-sizing: border-box;">
                <div class="gallery_container">
                    <div class="gallery_Item" style="width:100%; height: 100%; position: relative;">
                        <div class="imgInGallery" style="width: 100%; height: 100%; overflow:hidden;">
                            <img src="http://placekitten.com/500/400" style=" object-fit: cover; object-position: 50% 50%;" />
                        </div>
                    </div>
                </div>

                <div class="gallery_container">
                    <div class="gallery_Item" style="overflow:hidden;">
                        <div class="imgInGallery" style="display:flex;  height: 100%;  align-items:center">
                            <img src="http://placekitten.com/300/200" style="
                            max-height:100%; max-width: 100%; align-self:center; " />
                        </div>
                    </div>
                </div>
                
                <!-- More gallery containers go here -->
                
            </div>

https://jsfiddle.net/06akm1se/

htmlcss

Answer №1

Your collection of photos showcases a variety of aspect ratios, making it challenging to neatly fit them into a grid without some cropping or zooming in. Using the cover method can lead to parts of the photo being cut off to make it fit.

Considering the mix of aspect ratios, perhaps a traditional CSS grid layout may not be the most suitable option. Instead, exploring a masonry layout could provide a more visually appealing result where each photo's unique dimension is highlighted while maintaining an overall compact look.

You can find information on the masonry layout concept on MDN, which explains how this style adapts to different image sizes within a grid structure.

Masonry layout combines strict grid columns with variable height rows, allowing images to fill gaps and create a seamless visual flow.

While experimental CSS features like this are currently only supported in Firefox, utilizing a library specifically designed for arranging photos in a masonry style could be a practical solution. These libraries can automatically adjust image heights to create a harmonious display, even if manually calculating the column placement for simpler layouts is also feasible.

Answer №2

When you apply the CSS property object-fit: cover to an image element, it functions similarly to a background image. The image will expand to cover the container either horizontally or vertically based on the aspect ratio of the parent element and the image itself.

If you prefer not to have the image stretch or appear zoomed in, you can opt for object-fit: contain. However, this will result in the image not stretching to fill the entire container.

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

Error: The NgTable in AngularJS is not defined when reloading the page

I have successfully implemented Angularjs NgTable with pagination inside a tab provided by Angularjs Material in various parts of my project. However, I am facing an issue where I am unable to reload the tables in this particular case. I am unsure of what ...

javascriptangularjshtmlangularjs-directivengtable

What are some ways to monitor the movement of elements and activate functions at precise locations?

I am working on a project that involves a #ball element which, when clicked, utilizes jQuery animate to move downwards by 210px. The code I currently have is as follows: $('#ball').click(function() { $(this).animate({ top: '+=2 ...

javascriptjquerycss

Leverage the greater than operator within an AngularJS controller

This is the data stored in my controller: $scope.data = [{ "F": "1,26,000" }]; $scope.data2 = [{ "F": "26,000" }]; Now I want to implement an if-else condition using this data: if (Number($scope.d ...

htmlangularjsscopeoperand

Adding negative values to the Tailwind CSS utility plugin is a simple process that can greatly enhance

Adding Negative Values to Tailwind CSS Utility Plugin Quick Summary: I've developed a custom Tailwind utility plugin that includes numeric values. I'm looking for a way to introduce negative numbers by adding a - at the start of the class, simi ...

javascriptcssreactjsnext.jstailwind-css

What are some ways to remove scroll bars from an iframe?

I'm having trouble with scroll bars appearing in my iframe when inside a fancy box. I have tried everything to remove them without success. For example, you can view the issue here: http://jsfiddle.net/t4j3C/ No matter what I try, nothing seems to w ...

jquerycsshtmliframe

I am having issues with this knob not updating, and the reason for this problem is unknown to me

Within my PHP code, I am utilizing the following: <?php @include_once('fields.php'); $gg = fetchinfo("val","inf","n","current"); $mm = fetchinfo("val","info","n","max"); $cc = fetchinfo("num","games","id",$gg); $percent = $cc / $mm * 100; ...

javascriptphphtml

Discovering the method to extract text from an element within a search result with Selenium Webdriver

Struggling to extract a URL from Tripadvisor.com's search results using its element, my attempts have proven futile so far. Check out the code snippet below: from selenium.webdriver.common.keys import Keys from selenium import webdriver from seleniu ...

pythonhtmlselenium

What is the best way to obtain a direct file link from a server URL using JavaScript?

After acquiring a file located at /home/johndoe/index.html, I am utilizing a tool like XAMPP to host, with the folder /home being hosted on localhost. The variables in play are as follows: $server_addr = "localhost"; $server_root = "/home"; $file_dir = " ...

javascriptphphtmlajax

Customizing media queries, Overriding styles from parent elements

Currently tackling a responsive website design challenge where I'm dealing with conflicting styles in media queries and parent css. Here's the CSS from the parent style sheet: .sec1 p { text-align: left; width: 55%; margin-left: 8%; float:lef ...

htmlcssresponsive-designmedia-queriesstylesheet

ES6 import of CSS file results in string output instead of object

Too long; Didn't read I'm facing an issue where the css file I import into a typescript module resolves to a string instead of an object. Can someone help me understand why this is happening? For Instance // preview.ts import test from './ ...

javascriptcssangularwebpackimport

Receiving Null Value Upon Asynchronous API Call Before Data Retrieval

Struggling with Fetching and Displaying API Data in a Table I am facing a challenge where I need to fetch an API multiple times and populate the data into a table. The issue arises when the data for a specific year is not available, causing the table to b ...

javascripthtmlreactjs

Displaying live data from an XMLHttpRequest in a Vue component in real-time

I'm currently working on implementing lazy loading for a list of posts fetched from the WordPress REST API. My goal is to load additional news stories upon clicking an HTML element. However, I'm facing issues with accessing the original Vue inst ...

javascripthtmlwordpressvue.jswordpress-rest-api

Placing text and an image within a grid cell does not automatically stack them on top of each other

I have a large div with a grid display, consisting of 3 rows and 2 columns. I am attempting to include text directly below the photo within each cell. This is what my code looks like: <div class="arrange-fixes"> ...

htmlcss

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

javascripthtmlcss

Cropper.js, effortlessly populating a container with a perfectly centered image

I took inspiration from the cropper.js library website but made modifications. You can check out the original example here. Here's my version of the modified example: CodePen Link var image1 var cropper1 var image2 var cropper2 ...

javascriptcsscropperjs

Utilize Google Maps API to showcase draggable marker Latitude and Longitude in distinct TextFields

I am currently utilizing the Google Maps example for Draggable markers. My objective is to showcase the latitude and longitude values within separate TextFields, where the values dynamically change as I drag the marker. Once the user stops dragging the mar ...

phpjavascripthtmlgoogle-mapsdom

Changing the Values of Variables in an npm Package within SvelteKit

I have been working on a SvelteKit component library where I define variables for components like background-color and font-family in a CSS file. Inside the ./dist/index.js file of my library, I export the CSS using `import './main.css'`. When in ...

cssnpmsveltekit

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to store HTML code in a SQL Server database to ensure proper rendering?

My website is currently in development and is similar to Stack Overflow. I am using a simple textarea for text input as opposed to a WMD editor like the one used on Stack Overflow. When I enter HTML code as input and store it in my database table under a ...

javahtmlsqlsql-server

Creating a PHP-powered contact form for sending emails

I've been trying to set up a contact form, but I'm struggling to make it work. I downloaded a PHP contact form script, but I can't figure out how to get it functioning. Despite searching extensively on Google and here, I haven't found a ...

phphtmlcontact-form