Maintain Image Proportions When Window is Resized

Is there a way to maintain the aspect ratio of images within a three-column layout using CSS grid, even as the parent container width decreases below 980px?

Currently, when the parent container is reduced in size, the <img> elements shrink but do not maintain their original height, resulting in distorted images. How can this issue be resolved?

For reference, here is an example snippet of the code:

* {box-sizing: border-box}

body {margin: 0; padding: 0; width: 100%}

.section {
    position: relative;
    display: flex;
    margin: 0 auto; 
    width: 100%;
    padding: 4.299rem 0;
    background: red;
}

.row {
    position: relative;
    margin: 0 auto;
    width: 80%;
    max-width: 980px;
    background: yellow;
}

.three-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

.article {position: relative;}

.image {
    display: block;
    width: 100%;
    height: 12rem;
    background: lightblue;
}
<section class="section">
  <div class="row">
    <div class="three-column">
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
    </div>
  </div>
</section>

htmlcssimage

Answer №1

Currently, there are no src attributes set for the images, which is why a height value had to be assigned in order for the <img> block to display properly. If you want the final images to maintain the same proportion without explicitly setting the height, you can simply remove the height property and they will automatically adjust on smaller screens.

If the images have different proportions, it may be necessary to utilize CSS's @media query to handle them accordingly.

Answer №2

Here is a simple solution:

.img{
    max-height: 12rem;
    height: 20vw; (or any other value)
}


* {box-sizing: border-box}

body {margin: 0; padding: 0; width: 100%}

.section {
    position: relative;
    display: flex;
    margin: 0 auto; 
    width: 100%;
    padding: 4.299rem 0;
    background: red;
}

.row {
    position: relative;
    margin: 0 auto;
    width: 80%;
    max-width: 980px;
}

.three-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

.article {position: relative;}

.image {
    display: block;
    width: 100%;
    max-height: 12rem;
    height: 20vw;
    background: lightblue;
}
<section class="section">
  <div class="row">
    <div class="three-column">
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
      <article class="article">
        <img class="image" src="" alt="">
        <div class="headline-wrapper top-headline-wrapper-1 headline-wrapper-mobile-padding">
          <h3>THIS IS A TITLE</h3>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique illum ipsam facere, veniam ullam tempore laborum.</p>
        </div>
      </article>
    </div>
  </div>
</section>

Answer №3

To ensure your images scale proportionately, simply eliminate the height property on them and provide a source.

.image {
    display: block;
    width: 100%;
    max-height: 12rem;
    /* height: 20vw; */
    background: lightblue;
}

https://codepen.io/thingevery/pen/PowaKJo

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: Timthumb is redirecting to a 404 page when trying to load image

Timthumb has been working perfectly on my live site, but suddenly stopped working on localhost. The image source is written as follows... Although the image opens when I click and open in a new tab, it does not display on the current page... <img src= ...

phphtmltimthumb

Storing user responses on a webpage

I am feeling quite lost in my design and I need some help from a talented programmer who can guide me through this realm which is not exactly my area of expertise. My Current Assets Page - form.html <div style="text-align:left"> <form ...

phphtmlmysql

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

cssreact-nativeexpogoogle-places-autocomplete

Varied results may occur across various browsers despite the use of reset.css

What causes different browsers to display the same website differently due to inline style? Below is a snippet of CSS code: .label-input, .label-input label, .label-input input , .label-input select , .label-input span { float: left; display: inline; mar ...

htmlcss

What is the best way to divide a list in a Django template?

Currently, I am working on pagination in Django and looking to display the page numbers that come after the current page. The code snippet I am using is as follows: {% for page in blogs_page.paginator.page_range|slice:"0:{{ blogs_page.number }}" %} Howev ...

pythonhtmldjango

Retrieving images stored locally using HTML Xcode

Scenario: Developing an iOS app using Objective-C. I am attempting to load local HTML files that contain embedded images. The HTML files are located in a directory named pages. The images are stored in a separate directory called images. The project&apos ...

htmliosobjective-c

I am having trouble adjusting my web page to fit the screen fluidly as it appears too large and requires horizontal scrolling

As a student learning html/css, I am currently facing some challenges with my first website. My main issue is setting up the page to be fluid rather than fixed. The box, image, and text are all configured to be absolute on the page, but I cannot seem to ma ...

htmlcss

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

I recently encountered an issue while using jQuery.load to load a new page. The content on the original page is being treated strangely in some way. Specifically, I have code on the original page that formats LaTeX commands with MathJax: <script type=" ...

javascriptjqueryhtmlmathjax

Adjusting the size of a Google map based on the size of the browser

Currently, I am working on implementing Google Maps API v3. The map is displaying perfectly on my page, but the issue arises when I resize the browser. Upon resizing, the map reverts to its original size as it was when the page initially loaded. This is t ...

cssgoogle-maps-api-3

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Is there a distinction between "muted" and "volume = 0.0"? Event listeners handle them in separate ways

I am a newcomer to coding and have encountered an issue that has me stumped. I am working on developing a small media player intended for use with the athletes I coach. The concept is to require them to listen to my commentary while watching game footage. ...

javascripthtml

instantaneous javascript computations

Click the link below to view the code. Currently, the issue I am facing is that the bottom three sets of checkboxes are not performing the correct calculations and do not update when they are unchecked. Visit Code $('input[name=food]').change(f ...

javascriptjqueryhtmlcss

Getting the data value of a specific attribute while the active class is present in JQuery

My goal is to print out the data-attribute when an anchor tag has an active class using console.log Unfortunately, I always get a null value as output. I found guidance on this topic in a stackoverflow thread Below is my HTML code: $(document).ready(f ...

javascriptjqueryhtml

Add unique characteristics to a DOM element

Another Perspective: Is Creating Custom Attributes in HTML Tags Acceptable? Hello there, I'm unsure if my idea is feasible, but I want to add a custom (non-rendered) property to an existing HTML DOM node. For instance, given the following simpl ...

javascripthtmldom

What steps can be taken to resolve the error message "AttributeError: 'WebElement' object does not have the attribute 'find_element_class_name'?"

try: main = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "main")) ) articles = main.find_elements_by_tag_name("article") for article in articles: header = article.find_element_c ...

javascriptpythonhtmlseleniumselenium-webdriver

Adjust the image size to match the height of the frame

Working on a website where I want to incorporate a frame at the bottom of the screen, taking up 10% of space. I envision placing a logo within that frame, which seems straightforward. However, here is where it gets tricky. Since this frame's size de ...

html

Tips for utilizing a dropdown menu in Angular

<div> <label> Categories </label> <select> <option *ngFor = "let category of categories" [value] = "category" (click) = "onCategorySelected( category.name )"> ...

htmlangulardrop-down-menu

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

My website features two dropdown menus - one for selecting countries and another for cities. The country menu is populated with data from a database, and once a country is selected, the city dropdown is dynamically filled with corresponding cities using a ...

phpjqueryhtmlajax

What is the process of Defining an Element Based on Two Attributes in C#?

Is it feasible to specify a web page element based on two attributes? For example, I can locate the element by its innertext Element imagePage = ActiveBrowser.Find.ByContent(pageNumbers[p],FindContentType.InnerText); Alternatively, I can identify an ele ...

c#javascripthtmlasp.net

Concealing the rear navigation button within the material carousel

I have a material css carousel, and I am trying to hide the back button on the first slide. I attempted to use the code below from a previous post The following code snippet prevents the user from looping through the carousel indefinitely. Stop looping i ...

javascriptjqueryhtmlcssmaterial-design