I am facing a challenge in creating a hero image that would completely fill the div on my webpage. Despite setting the width and height to 100%, the image seems to only occupy half of the space.
Check out the CSS and HTML code snippet here.
div.hero{
width: 100%;
height: 100%;
margin:0 auto;
}
#imghero {
max-width: 100%;
max-height: 100%;
} <main>
<div class="hero">
<img src="https://i.sstatic.net/4Xg4w.jpg" alt="laptop" class="imghero">
<h1>Welcome</h1>
</div>
</main>Instead of following the common advice to use a background-image, I recommend utilizing an actual image element and scaling it with object-fit: cover. There are two key reasons for this approach:
Here is the method you can follow:
<div class="container">
<img
src="imageurl.jpg"
srcset="*optional*"
sizes="*optional*"
alt="My image"
/>
</div>
.container {
position: relative;
width: 80vw; /* Or adjust to desired size */
height: 50vh; /* Or adjust to desired size */
}
.container img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
If the container does not have fixed width/height, you can utilize an aspect ratio like so:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
Ensure that the Width & Height attributes are applied to the image, not just max-width & max-height
div.hero{width : 100%;
height: 100%;margin:0 auto; }
.imghero{max-width: 100%;
max-height: 100%;
height: 300px;
width: 100% !important;
}<main>
<div class="hero">
<img src="https://i.sstatic.net/4Xg4w.jpg" alt="laptop" class="imghero">
<h1>Welcome</h1>
</div>
</main>Remember to use .imghero instead of #imghero, as you are defining imghero as a class.
If you want to change the look of a div, consider adding a background image
.hero{
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQc-z-m2WiHy9yx9AfLg_YEi6mzltIlkaY_JGrIhP8d8mh_wMpB");
background-size: cover;
background-repeat: no-repeat;
/*this is optional*/
min-height: 500px;
} <main>
<div class="hero">
<h1>Welcome</h1>
</div>
</main>To avoid inserting an image directly into the div, I suggest using it as a background image instead.
<section>
<div class="header">
</div>
</section>
For the CSS styling:
.header {
background-image:url(image source here.);
padding-top:300px;
padding-bottom:300px;
}
The padding within the CSS code increases the height of the div, which is useful for adding text content inside.
Alternatively, you can replace the padding with height: auto to occupy the entire browser height.
When utilizing the img tag, you are restricted from adjusting the image widths and heights as they will default to the max-width and max-height of the image itself.
If you wish to make the image span full width or height, you can achieve this by adding it as a background-image attribute and then setting the desired widths and heights on the div.
HTML (please note that the actual image is excluded here and handled in the CSS):
<main>
<div class="hero imghero">
<h1>Welcome</h1>
</div>
</main>
CSS:
.hero {
width: 100%;
height: 100%;
margin: 0;
}
.imhero {
width: 100%;
height: 100%;
background-image: url("https://i.sstatic.net/4Xg4w.jpg") no-repeat;
background-position: center;
background-size: cover;
}
My situation involves having a list of usernames that represent accounts: let users = [ "user1","user2","user3","user4","user5","user6","user7" ] users.map(async (user, i) => { co ...
I'm currently developing a tags section for my app, similar to the tags feature in a new Stack Overflow question form. For this, I am utilizing the Material UI close icon. You can see how it is implemented in this tutorial on YouTube. (I have confirme ...
I recently set up a project using Vue3 and Quasar by running vue add quasar. However, I am struggling to figure out how to utilize Quasar sass/scss variables. According to the documentation, I should use the following syntax: <style lang="scss&quo ...
Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it. Although things are mostly going according ...
We are currently utilizing DataTables for our table, and we are encountering difficulties in retaining the history of filters that were previously applied to the table. This would allow users to navigate back and forth and refresh through these filters. O ...
I've been attempting to save the output of a function into a variable, but it's not working as expected. I've exhausted all my ideas and possibilities. Perhaps I'm just making a silly mistake :D I'm working with NodeJS, using expre ...
I have set up my nodejs/express application like this; app.set('views', __dirname + './views'); app.set('view engine', 'ejs'); After that, I created a route as shown below app.get('/page/MyPage', functio ...
I am currently exploring ways to load data on my second amp-list only after the first one has a selected value. Additionally, I am struggling to display a placeholder for the second amp-list. <div class="row"> <div class="col-sm-4 position-in ...
Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...
Here is a common question that often arises among beginners, as I had the same query when I first started Is there a way to set the port for express without manually coding it or selecting a port yourself? This was something that puzzled me during my init ...
Being a novice in web development, I've been experimenting with creating a modal body. The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ... Your e ...
I attempted to retrieve the language value of the device using the globalization plugin. I followed all installation procedures, read through the documentation, and searched for answers on this platform, but unfortunately, none of them provided the solutio ...
I am working on a project that involves creating a dynamic Highstock chart to showcase the daily influx of emails. The data is stored in a JSON file that gets updated every day, and you can see a snippet of it below: [{ "name": "Month", "data": [147199320 ...
Here is the HTML code I am working with: <div id='parent' align='right' dir='rtl' style=padding:0px;margin:0px;font-weight:bold;width:300px;height:auto;min-height:300px; "'<div align='right' dir='rt ...
After saving some names in a form, I am attempting to display them alphabetically. Below is the method that contains all the saved data. The variable response.data should contain this data: function refreshNames() { NameService.getNames().then(func ...
I'm just starting to explore Backbone. Can you help me figure out what I might be missing in this situation? Below is the model I am using: var Item = Backbone.Model.extend({ url: 'json/item.json', parse: function(response){ retu ...
Sending a JSON Object to JSP Page After following the provided link, I discovered that one of the answers suggests creating a JSON object using the following constructor: JSONObject jsonObj=new JSONObject(String_to_Be_Parsed); Upon downloading the JSON ...
My issue involves creating a new react project with typescript and adding a custom component with a separate CSS file for styling. The folder structure is as follows: In the Header.css file, I have defined a class: .mainHeading { color: green; } The ...
I have also developed this project on codesandbox: https://codesandbox.io/s/bar-graph-9nr8u?file=/src/App.js:2394-3036 I possess JSON data and a Pie graph with labels including car, bikes, motor, and trucks. My goal is to display the total number of users ...
So here's my issue: <asp:TextBox runat='server' /> <button id='b2'>hi</button> <script> $('#b2').click(function(e){ e.preventDefault(); alert('you clicked the button'); }); </script ...