Image alignment on a web page

I'm currently working on developing a website that features a unique wave effect at the bottom of the 'hero' image. From my research, I've learned that this can be achieved by cropping the bottom part of the image, making modifications, and then displaying it separately from the original.

The problem I'm facing is that the footer of the image does not appear in the same scale or ratio as the main image, which gives it an awkward look (view here).

html,
body {
  height: 10000px;
}

.hero-image {
  height: 100vh;
  min-height: 400px;
  background-size: cover;
  background-image: url("../imgs/hero_image.jpeg");
  color: #000;
  min-height: 90vh;
  justify-content: center;
  align-items: center;
  display: flex;
}

.hero-image-footer {
  height: 100vh;
  /*min-height: 400px; */
  background-size: cover;
  background-image: url("../imgs/Untitled-1.jpg");
  /* background-color: aqua; */
  color: #000;
  /* min-height: 90vh; */
  justify-content: center;
  align-items: center;
  display: flex;

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="284a47475c5b5c5a4958681d061b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a574a54">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<header class="hero-image">
</header>
...
htmlcssbootstrap-5

Answer №1

It was mentioned in a previous comment that you have the option to utilize either the calc or scale function to achieve the desired effect.

The calc function allows for calculations between CSS values, enabling you to manually perform adjustments and fine-tune your values. For further information, you can refer to the official documentation.

On the other hand, the scale function, as described in the documentation,

defines a transformation that changes the size of an element on a 2D plane. Since the scale is based on a vector, it can resize the element's dimensions horizontally and vertically at different rates.

Below is a brief example illustrating the use of both functions:

.calc {
  width: calc(100vw - 15em);
}
.scale {
  transform: scale(0.2);
}
<h3>Original Image:</h3>
<img src="https://example.com/image.jpg">
<h3>Image with width calculated as 100vw - 15em:</h3>
<img class="calc" src="https://example.com/image.jpg">
<h3>Image with a scale equivalent to 0.2:</h3>
<img class="scale" src="https://example.com/image.jpg">

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

Combining header and data elements within the same row by using the set_template function in the CodeIgniter

Utilizing the HTML Table Class from CodeIgniter, I am working on creating a table template. The example provided in the documentation is as follows: $tmpl = array ( 'table_open' => '<table border="0" cellpaddi ...

htmlcodeigniter

How can the horizontal scroll bar width be adjusted? Is it possible to create a custom

Within my div, I have implemented multiple cards that scroll horizontally using the CSS property: overflow-x: scroll; This setup results in a horizontal scrollbar appearing under the div, which serves its purpose. However, I would prefer a customized scr ...

javascriptcssreactjs

Restrict Bootstrap Column Width to Container Boundary

I am struggling to create a two-row hierarchy display for a set of photos using bootstrap 5. Despite my efforts, the images overflow out of the container instead of staying within it. My goal is to make the container fill the screen and act as a cover disp ...

htmlcssbootstrap-5

Stop images from appearing transparent when placed inside a transparent div

My issue is clearly visible in this image: The div element is transparent and affecting the images inside it. Below is my HTML code: <div id="cselect" style="position: absolute; top: 99px; left: 37px; display: block;"> <div class="cnvptr"> ...

javascriptjqueryhtmlcss

The border is not properly containing the element within

I've been struggling to create a menu with no luck. My goal is to add a border to all my li elements, but the border consistently appears only at the bottom. Is there a way to make the border wrap around the entire li element? Check out my code here: ...

htmlcss

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

javascriptjquerycss

Prevent vertical scrolling only on mobile devices while allowing horizontal scrolling

Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...

jqueryhtmlcssscroll

Modify the background color of a particular TD element when clicking a button using JavaScript and AJAX

When I click on the "Active account" button inside the designated td with the <tr id="tr_color" >, I want the value "1" to be added to the 'active_account' column in the database. I have been successful with this functionality. However, I a ...

javascriptjqueryhtmlcssajax

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

Creating an HTML layout that consists of three image elements placed over a single background image with each image

In my HTML code, I am utilizing multiple div elements. Each div is designated to hold an image with dimensions of 1600*750. Within each div, there is a fixed image that repeats across all the divs by using a specified class. Here are the details for each f ...

htmlcss

Node.js is experiencing difficulties loading the localhost webpage without displaying any error messages

I am having trouble getting my localhost node.js server to load in any browser. There are no errors, just a buffering symbol on the screen. The code works fine in VS Code. Here is what I have: server.js code: const http = require("http"); const ...

javascripthtmlnode.jsexpresslocalhost

Modifying JavaScript Code in Inspect Element Editor

When I modify the HTML content using Chrome's Inspect Element editor, any changes made are immediately visible. However, when I make changes to the JavaScript code, the modifications do not take effect. For example, if I have a button that triggers a ...

javascriptjqueryhtmldom

What is the method for integrating fingerprint recognition into a web application using either Laravel or Django?

For a school project, I've been tasked with creating a web application that can fingerprint users or visitors. This means gathering details about their device such as OS, browser, IP address, country, city, and more. The app needs to be modern and re ...

javascriptphphtmldjangolaravel

Certain rows appear to be missing even though they are present in both the webpage and its corresponding source code

I am facing a CSS issue that I am unable to resolve. I have 20 results that should be displayed on my website, but only 14 of them are appearing. The other ones are visible in the source code when inspected. When I move the position of the menu up or down, ...

phpjqueryhtmlcss

html form shifting positions based on screen resolution

I have been experimenting with a login screen design for my website recently. I created a form with a fixed position, but as the screen resolution changes, not only does the form's position shift, but also the image moves, causing an unwanted interse ...

javascripthtmlcss

The Vue.js @click event does not function properly when used in a selection on mobile

I designed a dropdown menu with different options, and when one is selected it updates the "Value" in vue to a specific amount. Then, I display the selected amount in an input field. For example: <select class="form-control" style="max-width: 150px;" ...

javascripthtmlvue.js

A step-by-step guide to setting up a Slick Slider JS slideshow with center mode

I am working on implementing a carousel using the amazing Slick Slider, which I have successfully used for images in the past without any issues. My goal is to create a 'center mode' slideshow similar to the example provided but with multiple div ...

javascripthtmlcssslick.js

Remove interactive data tables from the onclick event

I have a dynamically rendered DataTable from https://datatables.net. I implemented an on-click event for the rows based on this tutorial: https://datatables.net/examples/advanced_init/events_live.html In the row, there is a select box that I excluded by ...

jqueryhtmlcssdatatabledatatables

Elements missing from the Bootstrap 5 framework

I've been attempting to link my bootstrap card deck to a mongo database with ejs. The website renders without any errors, but for some reason, the cards are not displaying. Does anyone have any insight into what could be causing this issue? Below is ...

htmlejsbootstrap-5bootstrap-cards

What methods can be used to conceal a div when the content is not being shown?

I'm a beginner in HTML and CSS and I have a page with the following code: Content displayed : <div id="row-3" ><!-- Row 3 starts here --> <div class="groupz_column1" style="margin-right:0px;"><a href="http://www.xyz.in/ads/ ...

javascriptjqueryhtmlcss