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;
}
Related
here I have a div with a class="container", inside this div there is an img, I want the image to cover all the parent div, whatever size it is, also I want the image to preserve its aspect ratio, and the most important thing is, either width or height should be 100% if the other value (width, height) are bigger.
If the image are 2:1 aspect ratio, the height should be 100% to cover all the div and close all the gaps.
I hope you understand me, thanks
.container{
width: 250px;
height: 250px;
background-color: red;
overflow: hidden;
}
<div class="container">
<img src="https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" alt="img">
<div/>
Use CSS object-fit: cover
// demo showing size adjusting at different sizes
const container = document.querySelector(".container");
const range = document.querySelector("input[type='range']");
range.addEventListener("input", () => {
container.style.width = `${range.value}px`;
});
.container {
width: 250px;
height: 250px;
background-color: red;
overflow: hidden;
}
img {
min-width: 100%;
object-fit: cover;
}
<div class="container">
<img src="https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg" alt="img" />
</div>
<label for="range">Width of container</label>
<input type="range" name="range" min="1" value="250" max="600" />
The object-fit property might come in handy here.
Add a class to your image, say .image. Then provide the following styles:
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
That should do the trick. Check the other values for object-fit to see how else you might style images like this in the future.
Feel free to play around with a demo here.
You can also use the image as a background-image to your container with a background-size: cover.
.container{
width: 250px;
height: 250px;
background-image: url("https://img-19.ccm2.net/WNCe54PoGxObY8PCXUxMGQ0Gwss=/480x270/smart/d8c10e7fd21a485c909a5b4c5d99e611/ccmcms-commentcamarche/20456790.jpg");
background-size: cover;
}
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>
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
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;
}
I have an inline img that is 1280(w) x 1024(h) and is contained within a div. The divs dimensions are set 100%(w/h) of the viewport with overflow hidden.
I want to use the image as a fullscreen background and require that it fills the viewport completely regardless of dimensions with no borders showing. It must keep its aspect ratio and I would also like the image to be centered at all times. I am aware that to achieve this some of the image will be cropped.
I believe if make the image height match the viewport height and calculate the width based on the images aspect ratio this will work but I am unsure how to do this. Can anyone help?
Many thanks in advance.
Use backstretch http://srobbin.com/jquery-plugins/backstretch/
$("#demo").backstretch("http://urltoimage.jpg");'
set #demo to 100/100% width and height
If you're not 100% glued to using an img tag, you can do the following:
HTML
<div id="background"></div>
CSS
#background {
background: url('path/to/img.jpg');
background-size: cover;
background-position: center center;
width: 100vw;
height: 100vh;
}
Not really an answer to your question but a potential alternative -- have you tried the min-height/min-width CSS properties?
HTML:
<div class="container">
<div class="image-wrapper">
<img src="..." />
</div>
</div>
CSS:
.container {
width: 100vw;
height: 100vh;
background-color: grey;
}
.image-wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.image-wrapper img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
Fiddle: https://jsfiddle.net/mkjoyep1/
In the example, .container (your full width/height div), fills the page width vw/wh and the .image-wrapper has its width/height set to 100% which will match the parent's width and height. With overflow: hidden acting as the crop mechanism you can then stretch your image to fill it's container. I've positioned the image in the center with the method explored here.
This appears to work for me on Chrome and Firefox.
*Edited to include html/css