Scaling Images using HTML and CSS

Hey there, I'm currently learning web development and running into a bit of trouble with creating responsive images. Can anyone give me some guidance on what changes I should make in the code below?

Here's the HTML code:

<div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">

And here's the CSS:

#hero {
       width: 100%;
       height: 100vh;
        background-color: rgba(39, 37, 34, 0.8);
       overflow: hidden;
       padding: 0;
      }
#hero .carousel-item {
       width: 100%;
       height: 100vh;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
      }
#hero .carousel-item::before {
       content: "";
       background-color: rgba(12, 11, 10, 0.5);
       position: absolute;
       top: 0;
       right: 0;
       left: 0;
       bottom: 0;
     }
#hero .carousel-container {
       display: flex;
       justify-content: center;
       align-items: center;
       position: absolute;
       bottom: 0;
       top: 0;
       left: 0;
       right: 0;
     }
javascripthtmljquerycssfrontend

Answer №1

If you want your image to resize automatically, simply place it within a wrapping div that allows for resizing while ensuring the image div maintains its aspect ratio.

Please note: If the aspect ratio of your wrapper does not match the image's aspect ratio, a scrollbar will appear.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.resizeable-container {
  display: flex;
  align-items: center;
  justify-content: center;
  resize: both;
  overflow: auto;
  border: thin dashed red;
  width: 200px; /* Initial size */
}

.banner {
  background-image: url(http://placekitten.com/240/180);
  background-size: cover;
  aspect-ratio: 4 / 3; /* 240/180 = 4/3 */
  width: 100%;
}
<div class="resizeable-container">
  <div class="banner"></div>
</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

Utilizing JSON data to populate a modal window in HTML

How can I incorporate JSON data into an HTML modal window? I have a set of 12 buttons, and when a user clicks on one, I want to display the corresponding month's information from a JSON file. let myJson; $(`button`).on(`click`, function() { let ...

javascriptjqueryjsonbootstrap-4bootstrap-modal

Problems encountered when trying to deploy on Firebase

I've been working on deploying my web app to Firebase, and I successfully ran the deploy script. However, when I try to access the URL, instead of seeing my app, I'm greeted with the Open Hosting Documentation page. Here is what my firebase.json ...

javascriptfirebaseweb-deployment

Click on the hyperlinks one by one that trigger ajax events

There is a feature on the popular social media platform reddit.com where you can load more comments by clicking a link. I understand that comments may be hidden for performance reasons, but I would like to automatically expand all comments without having t ...

javascriptjqueryajax

Adjust the background color of the arrow in an HTML Select element

My select menu looks different in Firefox compared to Chrome/Edge In Firefox, it displays an "arrow button" https://i.stack.imgur.com/BGFvO.png However, in Chrome/Edge, the arrow button is not present https://i.stack.imgur.com/PXNJn.png Is there a way ...

htmlcssgoogle-chromefirefox

Stylish grey container with crisp white lettering

Just getting started with HTML and I've been working on a project for my class. Here's what I've come up with: <font style="background-color: grey; color: white; display: block">Black and white copies $.10 per page letter/legal size&l ...

css

Is there a way for me to view the data transmitted by JQuery to php?

I have this piece of jQuery code. I am curious to see what PHP will output. How can I display that result? <html> <head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <script> $.ajax({ ...

phpjquery

Accessing properties in JSON data with AngularJS

I am experiencing issues with accessing a JSON object returned from an $http call in my AngularJS app. I have provided the code snippet below, but it seems that nothing is being rendered on the HTML. Can anyone please assist me in identifying what I might ...

javascriptjsonangularjs

Retrieve the node-postgres result and store it in a separate object beyond the callback function

Currently, I am in the process of converting a data profiling script originally written in Python to JavaScript while following the Wes Bos beginner Javascript Course. This script is designed to take database connection details and a specified target tabl ...

javascriptnode.jspostgresql

Tabulator - Using AJAX to retrieve a JSON document

I am currently working on importing a json file from an Azure blob container using Azure Data Factory. Despite closely following the documentation and researching various resources on Stack Overflow, I am facing challenges with making the ajax request fun ...

javascriptjsonajaxazure-data-factorytabulator

Revisiting a jQuery ajax call using the response text

I have been attempting to implement ajax in the following way; Here is the jQuery code I am using: $("a.generate").click(function(){ $.ajax({ data: {tag: $(this).html()}, success: function(data){ $("#terms div.content").ht ...

jqueryajax

How can Cheerio help you effortlessly and stylishly locate tags that meet various specific criteria?

I am attempting to scrape data from the webpage . Specifically, I am looking for all the <li> tags that are nested within an <ul> tag, which in turn is located inside a div with the class mw-parser-output and has a property of title. Is there ...

javascriptnode.jsweb-scrapingcheerio

How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image. Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as de ...

htmlcssimageborder

Customizing data attributes for child components in Vue 2

In my Vue project, I have created a multi-page questionnaire using the v-show directive within a container called RiskAssessmentTest.vue. To handle loading questionnaire drafts, I have a component named RiskAssessmentDrafts.vue, which has the following st ...

javascriptvue.jsvuejs2vue-component

Learn the method for attaching bargraph bars to the bottom without specifying a fixed height

I've been struggling to create a bar graph displaying visitor statistics. The challenge lies in attaching the bars to the bottom without knowing their exact height beforehand. Since my code uses percentages for the height and it fluctuates each time y ...

htmlcss

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

magnetic container: stationary container nested within absolutely positioned container

I recently created a page that can be viewed here: [LINK] This page is set up to scroll horizontally, resulting in a row of divs with black borders. However, I am facing an issue with the smaller divs inside (red ones). I want them to stay within the par ...

javascriptjqueryhtmlscrollposition

"When the value is false, use the Vue binding to apply a specific

My challenge involves managing a website that is designed to receive boolean values and store them in an array where the key represents the ID and the value represents the boolean. For example: policiesActive[ "2" => false, "3" => false] The w ...

javascriptarraysvue.jsboolean

Removing a class with JQuery using the Contains method

I am attempting to remove the "hasChild" class from the following element, <li class="theme-nav-item selected enabled hasChild" data-nav-url="http://www.removed.com/page/nav/3353642"></li> by specifically targeting the value 3353642 with the ...

jquery

What is the best approach to defining a type for a subclass (such as React.Component) in typescript?

Can someone help me with writing a type definition for react-highlight (class Highlightable)? I want to extend Highlightable and add custom functionality. The original Highlightable JS-class is a subclass of React.Component, so all the methods of React.Com ...

javascriptreactjstypescriptnpmtypescript-typings

What is the best way to make the div inside the table cells expand to fill the available space?

I'm having trouble making the inner divs within table cell divs expand and fit their parent div without overlapping the next cell below it. Check out the sandbox for reference I've outlined the areas in grey where I want the cells to be filled. ...

css