Place the image at the bottom of its parent div without using absolute positioning

Is there a way to place an <img> element at the bottom of its parent <div> without using position: absolute or position-absolute class while maintaining the design integrity?

Using absolute positioning disrupts the entire layout I have created.

I've attempted various solutions such as adding another container <div> for the image and experimenting with attributes like vertical-align, bottom, margin-bottom, but none have been successful.

The desired outcome is to achieve a design similar to this: https://i.sstatic.net/pxVIQ.png

However, I am facing the aforementioned issue.

I aim to have the red images:

  • Maintain their original size (in px) on desktop devices without resizing to fit the tallest one.
  • Be positioned at the bottom of their respective divs.
htmlcssimagebootstrap-4

Answer №1

Experiment with using the display: flex; declaration in your CSS.

<!DOCTYPE html>
  <html>
    <head>
      <title>Parcel Sandbox</title>
    </head>

    <body>
      <div class="container">
        <img src="https://source.unsplash.com/random/200x200" alt="" />
      </div>

    </body>
  </html>

CSS:

container {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

Have a look at this sandbox demo

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

Creating a simulated loading screen

I have created a preloader page for my website following tutorials, such as the one found here: https://codepen.io/bommell/pen/OPaMmj. However, I am facing a challenge in making this preloader appear fake without using heavy content like images or videos. ...

javascripthtmlcsssettimeoutpreloader

Is there a way to ensure that the text stays positioned behind the initial image even as the window size is adjusted

<html> <head> <title> Example </title> <style> img:hover {opacity : 0.3;} img {z-index : 1; height : 33%; width : 33%; } .first { position : absolute; top: 0%; left: 0%;} .second {position : absolute; top: 0%; left: 33%; ...

htmlcss

You are unable to define a module within an NgModule since it is not included in the current Angular compilation

Something strange is happening here as I am encountering an error message stating 'Cannot declare 'FormsModule' in an NgModule as it's not a part of the current compilation' when trying to import 'FormsModule' and 'R ...

javascripthtmlangularangular9

Click on a Marker to automatically zoom to its location using Leaflet mapping technology

I have successfully implemented a feature to display markers on the map from a geojson file. Currently, when I hover over a marker, I can see its properties in a popup. However, I now want to enhance this functionality so that when a user clicks on a mar ...

javascripthtmlleafletzoomingmarker

Enhance the functionality of the range input in Vue.js 3

Is there a way to update or display the current value of a range input in Vue 3? I initially believed that it could be achieved using v-model in this manner: <input id="rangeSlider" type="range" class="form-range" v-model= ...

htmlvue.jsinputslidervuejs3

Issue encountered during Python web scraping: TypeError: attempting to concatenate a string and a list

Despite my extensive research on this particular error, I am still struggling to find a solution. My current project involves web scraping a website using Python and attempting to navigate to other websites through the href links provided. years_code=[&apo ...

pythonhtmlweb-scraping

Accidental delay upon mouse exit

Upon hovering over, the transition immediately begins, but there is a delay of about 300ms before the reverse transition starts upon hovering off. (https://example.com) <div id="isa-hover-gallery"> <a href="https://example-link.com"> <div ...

csscss-transitions

Scaling the ion-spinner to fit your specific needs

In my Ionic application, I am utilizing the ion-spinner. However, I have encountered an issue with resizing the spinner. While custom CSS works well with default spinners, it does not function properly with Bubbles, Circles, and Dots spinners. CSS .spin ...

cssangularionic-framework

What is the best way to highlight Navbar links when reaching a specific section?

When designing my website, I encountered an issue with the active navigation link style. It successfully changes when clicked and scrolled to the section, but does not update when the user scrolls away. How can I make the active style update on user scroll ...

javascripthtmljquerycssscroll

Trouble with jQuery delay in updating the CSS attribute while using fadeIn

After writing a simple JQuery code, I noticed that every time I click on 'eat', the animation lags. Is there any way to preload this animation for smoother performance? The #custom_menu element is a full-page section with a fixed position (simil ...

javascriptjquerycss

Troubleshooting a Link Display Issue with Python and Selenium

I'm currently working on a query that can scan the URL associated with the div class ""_1gkBDw _2O43P5"" and display it. Below is the code snippet: import time from selenium import webdriver from selenium.webdriver.common.by import By from ...

pythonhtmlseleniumselenium-webdriver

Using Bootstrap "Display-3" effectively for smaller mobile screens

I am impressed with how "display-3" looks on desktop, it really stands out. However, the issue arises when viewing it on mobile as some of the words are cut off. I'm wondering how to change it to "display-4-sm" or something similar for mobile devices. ...

bootstrap-4

`Unable to locate Dropdown Menu Element`

Currently, I am in the process of developing a website that utilizes a series of images as a navigation menu. While I managed to successfully implement a dropdown (slideout) menu on one side, the other side fails to display the menu upon mouseOver interact ...

htmlcssdrop-down-menuhoverdisplay

Is there a single CSS property value that you want to exclude?

Is there a way to disable only one specific value of a CSS property? For example, when it comes to the 'text-decoration' property, options include none, underline, overline, line-through, blink, and inherit. I want to allow all values of text-de ...

htmlcsstext-decorations

Why do the fontawesome icons fail to appear in my SVG file?

I've encountered a peculiar issue where icons (from fontawesome) are not appearing in my svg. They have always displayed correctly on my personal computer, so for a while I didn't realize that others were having trouble seeing them. For instance ...

htmlcsssvgfont-awesome

Using TypeScript, pass an image as a prop in a Styled Component

I am facing an issue with the code below that is supposed to display the "NoBillsLaptopPNG.src" image on the screen, but for some reason, the image is not showing up. The images are being imported correctly, so I'm unsure why the image is not appeari ...

javascriptcssreactjstypescriptstyled-components

HTML code now launches in the existing electron window rather than opening a new window

<html> <head> <title></title> </head> <input type="button" name="new" id="newmon" value="new"> <button onclick="open1()">monitor 1</button&g ...

javascripthtmlnode.jselectron

Modify SQL table to alter the timestamp value

I am currently utilizing PHP to showcase an SQL table. Once a user selects a row on the table and clicks a button, I aim for it to update the timestamp to the present time and reflect on the displayed table within the webpage. The SQL query that I have wor ...

javascriptphpjqueryhtmlmysql

Adding ids dynamically to href elements in Vue.js

As a newcomer, I am facing an issue with dynamically adding an id to my href tag. Below is the code snippet: <div class="col-md-6" v-for="Product in data"> <div class="panel panel-default" > <div class="panel-heading"> ...

htmlcssvue.jsbootstrap-4

What is the reason for overflow-y: auto not generating a scrollbar?

I'm currently working on a web project that utilizes CSS Flexbox. I am trying to create a layout with a fixed left sidebar and a scrollable right side. I have added overflow-y: auto to the right side content to enable scrolling, but unfortunately, it& ...

htmlcssflexboxresponsive-designoverflow