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;
}

To crop/resize an image to change the aspect ratio using CSS

I have an image of size 700px(width) x 333px(height) which have aspect ratio 2.10. I want to display this image in size 327px(width)and 183px(height) with aspect ratio 16:9.The original images could be cropped or resized with minimum distortion and final aspect ratio of each element should be 16:9 and displayed as 327px(width)and 183px(height).Following is the code I tried.
object-fit: cover; works fine, it crops and resizes the image to size 327px X 183px but it is not supported on all/older browsers versions. What could be an alternative to achieve the same result through CSS supported on all and older browsers?
/*original image : http://starmoz.com/images/lancia-gamma5.jpg */
.cropAndResize {
width: 327px;
height: 183px;
object-fit: cover;
}
<body>
<div>
<img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
</div>
</body>

For crop purpose I often make use of background-image on a element of type block or inline-block instead of relies on img tag:
.cropAndResize {
width: 327px;
height: 183px;
background-size: cover;
background-position: 50% 50%;
background-image: url('http://starmoz.com/images/lancia-gamma5.jpg');
}
<body>
<div class="cropAndResize"></div>
</body>

One simple solution could be:
.cropAndResize {
height: 183px;
margin-left: -20px;
}
div {
width: 327px;
overflow: hidden;
}

Maybe something like this could work for you? The only caveat is you need to set a specific margin to align the image within the container to center it.
.crop {
width: 327px;
height: 183px;
overflow: hidden;
position: relative;
border: 1px solid black;
}
.cropAndResize {
position: absolute;
min-width: 100%;
max-height: 100%;
margin: 0px 0px 0 -20px;
}
<body>
<div class="crop">
<img src="http://starmoz.com/images/lancia-gamma5.jpg" class="cropAndResize">
</div>
</body>

Styling images of different sizes to a fixed size grid

I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.

As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>

Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element

If image height exceeds image width, vertically center image by cropping its top and bottom - possible with only CSS?

Given a scenario where you don't know the height and width of image elements in advance, let's say that in cases where image height is greater than image width, you'd like to vertically center the image by cropping the same amount of pixels form its top and bottom, such that the new image height matches the image width. For example, if an image has a width of 200px, and its height is 250px, crop 25px from its top and from its bottom.
Here's an example setup:
HTML:
<div class = 'cell'>
...
<div class = 'image_container'>
...
<img ...>
</div>
</div>
CSS:
.cell {
display: inline-block;
float: left;
/* width will be changed by use of '#media screen'.
Smaller browser window -> larger width */
width: 31%;
}
.image_container {
position: relative;
float: left;
width: 100%;
}
.image_container > img {
width: 100%;
}
Is it possible to accomplish the aforementioned center/crop operation using only CSS, or is it necessary to use javascript/jquery for this?

You can use the object-fit CSS attribute. It acts a lot like the background-size attribute.
.image_container > img {
object-fit: contain;
}
Note that this doesn't have full browser support as of now (October 2016) so you may want to look into setting the image as a background on a div and using background-position and background-size to deal with this instead of an <img> tag.
.image_container {
height: 300px;
background-color: cornflowerblue;
image-rendering: pixelated;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALklEQVQoU2NkgID/UBqdYmSESoJobOA/sgKQKTCFMDaKAuqYAHMs3CqiHInXmwDZGBMDEmk6SQAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center center;
background-size: 200px;
}
<div class="image_container"></div>

.cover_image {
height: 400px;
background: url('http://lorempixel.com/g/400/200/') no-repeat scroll center center;
background-size: cover;
}
<div class="cover_image"></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;
}