Is there a way to ensure that the height of my images matches exactly with its width?

Is there a way to ensure that the height of my images always matches their width?

I need the height of the images to dynamically adjust and match the width, even when the window is resized.

For example, if the image width is 500px, the height should also be 500px. And if the width changes to 600px after resizing, the height should adapt accordingly.

One important constraint: Do not set a fixed width for the grid or images.

See Desired Result Here

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

img {
  width: 100%;
  object-fit: cover;  
}
<div class="grid">
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>     
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>
</div>

htmlcss

Answer №1

Use a div element as a wrapper for each image, with the height set to 0 and the padding-bottom set to 100% based on its own width:

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .grid div{
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      position: relative;
    }

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;  
    }
 
    <div class="grid">
      <div>
        <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>     
      </div>
      <div>
        <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>     
      </div>
      <div>
        <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>     
      </div>
      <div>
        <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>     
      </div>
    </div>

Answer №2

To ensure your img elements align properly, simply include the align-self: stretch property in your CSS rule for img:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

img {
  width: 100%;
  object-fit: cover;
  align-self: stretch;
}
<div class="grid">
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-1.jpg"/>     
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-2.jpg"/>
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-3.jpg"/>
  <img src="https://vietadang.github.io/the-stars/dist/images/menu/dessert-4.jpg"/>
</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

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

css

Modifications to the toolbar styling are made by the Angular Material mat-form-field

Having some trouble creating an input field in my component alongside a mat-toolbar element. When I try to insert a mat-form-field, it ends up messing with the styling of the mat-toolbar. I've been unable to pinpoint exactly where the issue lies (if ...

cssangularangular-material

Stylish curved bottom border

Is it feasible to create this footer using just CSS? https://i.sstatic.net/b33w4.png Appreciate the help! ...

cssbackgroundborder

Getting rid of the <br> tag as well as the linked <span> element

I've been experimenting with creating dynamic forms. My latest project involves a text box, an 'Add' button, and a div. The idea is that whenever a user types something into the text box and clicks the Add button, that value should appear in ...

javascriptjqueryhtmlcss

Struggling to align list-items in a horizontal manner

I'm having trouble aligning the list-items in my horizontal navbar. Can anyone assist me in identifying the error? Below is the HTML code, which has a complex structure due to the use of the Wordpress thesis theme and Cufon for font replacement: < ...

csscss-floatinline

Using a scrapy spider to navigate through microsoft.com in search of the sign-in link

I have encountered an issue while trying to locate the sign-in link using a scrapy crawler on various websites, such as www.microsoft.com. Initially, the response I receive from the website does not contain the sign-in link. However, upon inspecting the "V ...

htmlscrapyweb-crawler

Numerous elements positioned absolutely are overlapping

I am working on a website with a unique slide layout design. I am currently focusing on two specific slides: https://i.stack.imgur.com/xngF4.png and https://i.stack.imgur.com/W19tJ.png My goal is to include a button on each individual slide, similar to th ...

htmlcsscss-position

JavaScript date formatting without using jQuery

Looking for help to apply a date mask (dd/mm/yyyy) on an ASP.net textbox. I have tried several JavaScript solutions found through Google search, but none seem to work seamlessly, especially with backspacing. Any suggestions for a reliable script would be ...

javascripthtmlasp.net

Ways to access Windows Explorer by clicking on a link?

Is there a way to access a folder in Windows Explorer directly from an HTML website using a hyperlink? Currently, the following code only opens the folder within the web browser: <a href="file:///folder">Open Folder in Windows Explorer</a> ...

htmlwindows-explorer

Find all elements with the same class and identify the first element among them using jQuery

In my dynamic data structure, I need to filter out all elements with the class name "My_data" and select the first one. In the code below, I am looking to retrieve the first element with the class "My_data". <div class="all_data"> <div class="lis ...

javascriptjqueryhtmljquery-selectorsjquery-filter

In Mobile View, I want to swap out my current image for text to keep it hidden

I am attempting to include text that is only visible in Mobile View as a replacement for my logo. Below is the code I am using: CSS: @media only screen and (max-width:1024px) { header .logo { display: none; } header .logo a { display: non ...

htmlcssresponsive-design

Browser Fails to Recognize AJAX Links as Visited

It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery ...

jquerycssajaxjquery-mobilebrowser-history

Strategies for aligning a div element in the middle of the screen

Positioned in the center of the current viewport, above all other elements. Compatible across different browsers without relying on third-party plugins, etc. Can be achieved using CSS or JavaScript UPDATE: I attempted to use Javascript's Sys.UI.Dom ...

javascriptcss

Implementing Image Data in AngularJS: A Guide to Binding Images to IMG Tags

Allow me to explain the problem further. I am retrieving a user's profile picture by calling an API that returns image data, as shown in the screenshot below https://i.stack.imgur.com/t8Jtz.jpg https://i.stack.imgur.com/pxTUS.png The reason I canno ...

javascriptjqueryhtmlangularjs

ngSwitchCase provider not found

While following a tutorial and trying to implement what I learned, I encountered an error that I'm having trouble understanding. The browser console shows an error message stating [ERROR ->]<span *ngSwitchCase="true">, but I can't figure ...

javascripthtmlcssangular

Header with absolute positioning doesn't play nice when nudged in Chrome

Take a look at the HTML page on this JSFiddle link: http://jsfiddle.net/rb8rs70w/2/ The page features a "sticky" header created using CSS with the property position: absolute. ... <body class="body-menu-push"> <header role="banner"> ...

htmlcssgoogle-chrome

Issues with PHP not reflecting changes to MySQL database

I'm struggling to find a solution to the issue I'm facing on various forums. The problem involves two pages, an HTML page and a PHP page. The HTML page simply populates a dropdown list from a database column. Below is a simplified version of the ...

javascriptphpjqueryhtmlmysql

Adjusting the width of an image in Safari

I just launched my website, but I encountered an issue with the image size in Safari. In my CSS, I set the width like this: img { width: 450%; } Here is the site: I can't figure out why the images display correctly in Chrome and Mozilla, but ...

csssafarisass

Is there a way to determine the orientation of an image in React-Native, whether it is horizontal or vertical

When working with react-native, I aim to utilize the 'contain' feature for vertical images and the 'stretch' feature for horizontal images. What would be the best way to determine the orientation of an image as either horizontal or vert ...

javascriptandroidioscssreact-native

Troubleshoot: CSS class H2 style is not displaying correctly

I have the following code in my .css file: h2.spielbox { margin-bottom:80px; color:#f00; } a.spielbox { text-decoration:none; background-color:#aff; } However, in my html file, the h2 style is not ...

css