We Keep Coding

How can i get my image to to completely fill my div?

I'm trying to create a hero image that would fill the div to my web page. I've tried setting the width and height to 100%, but for some reason the image will only fill the div to about half way.
Here's the CSS and HTML Im trying to get the image to fill the entire screen but it wont work for me
div.hero{
width: 100%;
height: 100%;
margin:0 auto;
}
#imghero {
max-width: 100%;
max-height: 100%;
}
<main>
<div class="hero">
<img src="https://i.stack.imgur.com/4Xg4w.jpg" alt="laptop" class="imghero">
<h1>Welcome</h1>
</div>
</main>

I see others here recommend going with the background-image, but I would suggest using an actual image element instead, and scaling that with object-fit: cover. There's two reasons for that.
You get the SEO and accessibility benefit of having an actual image element
It gives you all the benefits of image elements, like using srcset to serve different sizes to various devices, using lazy loading etc...
Here's how you do it:
Html
<div class="container">
<img
src="imageurl.jpg"
srcset="*optional*"
sizes="*optional*"
alt="My image"
/>
</div>
Css
.container {
position: relative;
width: 80vw; /* Or whatever size you want */
height: 50vh; /* Or whatever size you want */
}
.container img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
If you don't have a fixed with/height on the container, you can use an aspect ratio instead like this:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

You have to set Width & Height also to the image, not only 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.stack.imgur.com/4Xg4w.jpg" alt="laptop" class="imghero">
<h1>Welcome</h1>
</div>
</main>

Use .imghero instead of #imghero, you are declaring imghero as class

You can try setting a background image to div
.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>

I wouldn't put an image straight in the div, I'd add as a background image.
<main>
<div class="hero">
</div>
</main>
and for CSS
.hero {
background-image:url(image address here.);
padding-top:300px;
padding-bottom:300px;
}
The padding in the CSS adds height to the div, handy if you want to add text in there.
Or you could replace the padding with height: auto to fill the entire browser height.

Since you're using the img tag, you can't manipulate the image widths and heights, it's max-width and max-height will be that of the image.
In order for you to get it to span a full width / height, you'll need to add it as a background-image attribute. Then you can set the widths and heights on the div.
HTML (note, we don't include the image here we do it 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.stack.imgur.com/4Xg4w.jpg") no-repeat;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Object-fit and image map css

I have a div with image inside it. Following is the CSS
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}
body, html {
height: 100%;
}
#mydiv {
border:5px dashed #0000cc;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
HTML is -
<div id="mydiv" class="animated zoomIn">
<img src="img/6.gif"/>
</div>
The image clicks have been generated from this website
Issue : When the image is object-fit inside the div, as it should show as per screen width and height, the image maps (or so called) do not move. In short the image rectangle (the area where the image fits) still fills in div. My expectation was image would shrink its bounds (when I put border to image, it should be smaller than that of div) thus placing the image map correctly. Now the image map are placed all over the screen.
Any pointer how I can achieve true responsive image map (or a href) in images with object-fit of image?

You can use object-fit: cover; Hope it will solve your problem. Here's my solution.
img {
width: 100%; /* or any custom size */
height: 70vw;
object-fit: cover;
object-position: center center;
}
body, html {
height: 100%;
}
#mydiv {
border:5px dashed #0000cc;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
overflow: hidden;
}
<div id="mydiv" class="animated zoomIn">
<img src="https://i.imgur.com/J67Ukc8.jpg"/>
</div>

Fitting picture into div

I am facing problem with fitting picture into div. Basically divs are the cards headers. Pictures are in different orientation and also size. What should I do to fit them in ?
Photo in div

I use this trick and works really well for me:
<div class="card" style="background-image: url(...)"></div>
And the the CSS:
.card {
background-size: cover;
height: 400px;
width: 600px;
}
The point is to scale the image using the cover background sizing method that shows most of the image and also covers the whole div so your items will be consistent in size.

Okay I have fixed the problem. I have assigned class to the div.
<div class="fill">
<img src="...">
</div>
and in css.
.fill {
max-width: 70%;
height: 100%;
}
.fill img {
width: inherit;
height: inherit;
}

Here is an approach with object-fit.
Fill : This will stretch the image to fit the parent disregarding the aspect-ratio.
Contain: Preserves the aspect-ratio but may increase or decrease the size of image. Low res scaling up may be distorted.
Cover: Keeps the aspect ratio of the image and will fit the parent container but will most likely crop the image.
.img-container {
height: 300px;
width: 400px;
background-color: yellow;
}
.cover {
object-fit: cover;
height: 100%;
width: 100%;
}
.contain {
object-fit: contain;
height: 100%;
width: 100%;
}
.fill {
object-fit: fill;
height: 100%;
width: 100%;
}
<h1>Cover</h1>
<div class="img-container">
<img src="http://i.stack.imgur.com/BPfiX.jpg" class="cover" />
</div>
<h1>Contain</h1>
<div class="img-container">
<img src="http://i.stack.imgur.com/BPfiX.jpg" class="contain" />
</div>
<h1>Fill</h1>
<div class="img-container">
<img src="http://i.stack.imgur.com/BPfiX.jpg" class="fill" />
</div>
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

I am guessing what you want, I've also seen the post where you've answered your own question. Here is one other possible solution. You can play with it and set container width and height with different values. I've used two pictures. One with height>width and the other with height<width.
here is also fiddle
.img-container {
border: 2px dashed #f00;
line-height: 0;
text-align: center;
}
.img-container img {
max-height: 100%;
max-width: 100%;
height: auto;
}
<div class="img-container">
<img src="https://upload.wikimedia.org/wikipedia/en/0/05/Doctor_Who_-_Current_Titlecard.png" alt="drwho">
</div>
<div class="img-container">
<img src="https://lh4.googleusercontent.com/-MkDsiF5-BXQ/AAAAAAAAAAI/AAAAAAAAKv0/dRBJk-2PGw4/s0-c-k-no-ns/photo.jpg" alt="who2" />

You can try both of these options:
.card-image {
background: url(...);
background-size: cover;
}
Two notes:
- about 7% of browsers don't support cover;
- using 'fixed' with background can cause unpredictable issues;
- you can also try background-size: contain and see if it gives you better results.
Also, I would recommend reserving some space for the image until it loads, to avoid document reflow when picture begin reloading.
.card-container {
position: relative;
}
.card-image {
padding-bottom: 56.25%; //for 16:9 ratio
}
.card-image img {
position: absolute;
top: 0;
left: 0;
}

img height as a percentage of the browser window

i want to make a full-width picture slider with jquery (myself) and i want it to scale well in any size of the browser in a way that its height is smth like 80% of the browser window's height and resizes as the browser do indeed!
this is my html:
<body>
<img class="img_slides" src="../images/1.jpg" alt="1.jpg" width="90%"/>
</body>
but it doesn't work while if i use width insteed of height the exact thing i want happens!
sry if i wrote too much! but otherwise my question wasnt meeting the sites qualities and they couldn't submit it!!

Codepen e.g.
img {
height: 80%;
}
body, html {
height: 100%;
}
You need to have body & html height set to 100% because by default they don't take 100% of the viewport. Without it, setting image's height to 80% won't work.

This should auto-size your image and center it on the page
<div class="wrapper">
<img class="image" src="#">
</div>
<style type="text/css">
.wrapper {width: 100%; height: 100%;}
.image {position:absolute; height: 80%; width:auto; left:0; right:0; top:0; bottom:0; margin:auto}
</style>
// EDIT
<body style="width:100%; height:100; margin:0">
<img class="image" style="position: absolute; height: 80%; width: auto; left: 0; right: 0; top: 0; bottom: 0; margin: auto;" src="url.jpg">
</body>

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/

To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?

If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO

try ..
$backWidth=$(window).width();
$backHeight=$(window).height();

As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>