I need to make a img fill a div while still containing the img's proportions.
My html looks like this:
<div class="container">
<img src="#">
</div>
My CSS looks like this:
.container{
width: 200px;
height: 200px;
overflow: hidden;
}
.container img{
object-fit: cover;
}
I tried using object-fit: contain. However, this has NO effect... What am I doing wrong? Thanks!
Try this
.container img {
max-width: 100%;
max-height: 100%;
}
Demo here
Put the object-fit property on the container, not the image itself.
.container{
width: 200px;
height: 200px;
/* overflow: hidden; no longer necessary */
object-fit: cover;
}
Related
Let's say that I want to fit an 10*60 image into a 15*15 container. That is to say, I want to stretch my image so that the width correspond (so that would be an image of 15*90), but I do not want the height to stretch more than the width, so the bottom of my image will not appear.
When I define my html image, I put an width=100% to stretch the width, but what do I say to the height?
Thank you !
You can simply use a background image and set its background-size property to contain (or cover, depends what you need).
.container {
background: url(http://via.placeholder.com/350x300) no-repeat center center orange;
background-size: contain;
animation-duration: 3s;
animation-name: changewidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes changewidth {
from {
width: 100px;
height: 300px
}
to {
width: 300px;
height: 100px
}
}
<div class="container"></div>
You can also position the image absolute, so you can do something like this:
.embed.ratio-16-9
img
.embed {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
img {
position: absolute;
top: 0;
left: 0;
right: 0;
min-width: 100%;
}
.ratio-16-9 {
padding-bottom: 56.25%;
}
The image height should no longer be stuck to you block.
If I understood the question correctly, you don't have to specify any value on the height property. Just set overflow:hidden on your container if you don't want the overflowing part of the image to show. Hope this helps.
CSS background-image with background-size: cover
You should use CSS background-image property for this kind of styling your web elements.
What you're looking for is probably the background-size: cover;. What it does is it fits the image based on width of the container.
CSS:
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
}
HTML:
<div class="cont"></div>
Also, if you want to center your image vertically use background-position-y: center;.
.cont {
width: 200px;
height: 200px;
background-image: url('urlToImage100x300.jpg');
background-size: cover;
background-position-y: center;
}
HTML img tag
If you really need to use an <img /> tag for this operation; What you need is to put the image into container, then set the width, height to your desired size and overflow-y to hidden. After that, set the width of an img to 100% and it's done.
CSS:
.cont {
width: 200px;
height: 200px;
overflow-y: hidden;
}
.cont img {
width: 100%;
}
HTML:
<div class="cont"><img src="image100x300.jpg" /></div>
Working demo CSS w/o y-axis center: https://jsfiddle.net/e2vt3sw6/
Working demo CSS w/ y-axis center: https://jsfiddle.net/e2vt3sw6/1/
Working demo HTML img tag: https://jsfiddle.net/e2vt3sw6/2/
Tests where made using 150x300px image and 200x200px container
I'm trying to create a CSS style that will take an image and scale it to best fit a letter box shaped div. The overflow will be cropped off. I'm close with this and it currently looks like this:
The original image is
I'd like to modify this so that the image is centered vertically in the div rather than top aligned. What am I missing here? My html is
.crop {
width: 670px;
height: 200px;
overflow: hidden;
}
.crop img {
width: 670px;
}
<div class='crop'>
<img src='http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg' />
</div>
I can't assume the height of the image to be the same everywhere I use this.
You can position the image relatively and then have the browser bump it upward 50% with top:-50%;:
.crop {
width: 670px;
height: 200px;
overflow: hidden;
}
.crop img {
width: 670px;
position:relative;
top:-50%;
}
<div class='crop'>
<img src='http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg' />
</div>
You could use the CSS background-position property.
https://www.w3schools.com/cssref/pr_background-position.asp
.crop {
width: 100%;
height: 200px;
overflow: hidden;
background-image: url('http://cycle.travel/images/600/amsterdam_ccby_conor_luddy.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
<div class='crop'></div>
Effect : https://codepen.io/anon/pen/YZvymg
Desired Effect : https://codepen.io/anon/pen/RpJWXm
Open the picture to the biggest point then minimize your browser.
How do I make it so the entire background image resizes when the browser gets smaller(minimize)? This is what happens in the "Desired Effect" but in the "Effect" when I use background it doesn't resize.
<header>
<div class="image"></div>
<header>
html,body {
height: 100%;
}
header {
height: 100%;
width: 100%;
}
.image {
height: 100%;
width: 100%;
background: url("https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
}
You can achieve it by setting background-size
.background {
height: 100%;
width: 100%;
background: url("https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
background-size:100% 100%; /*this one*/
}
Try with background-size property.
I am trying to fit image into div. But somehow image is not fitting. Take a look at div called as node2
I have put below properties to image
img {
max-width: 100%;
max-height: 100%;
}
Here is my Fiddle
Instead of using max height and width, try using regular:
img {
width: 100%;
height: 100%;
}
I also noticed in your fiddle, under CSS you had the following:
object-fit: contain;
You need to remove this as well.
Both of which will stretch the image both vertically and horizontally across the whole of the div.
I think you need this:
img {
float: left;
object-fit: fill;
width: 100%;
}
and if you do not want to strecth your image then please add following css also:
#node2 {
height: auto;
width: 255px;
}
Please find fiddle demo here.
if you want it 100% x 100% then, do it as background image of your div:
div{
background-image: url('../images/yourimage.jpg');
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
}
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Without using a background, consider this:
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
Full screen Image? you could do something like this through HTML
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
http://jsfiddle.net/pj73m4po/
EDIT:
or are you looking for something like this?
http://jsfiddle.net/pj73m4po/1/
Try the following: http://jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
The points that I gather from your css are the following:
Center the image
Fix the position of the image (so it doesn't scroll with the page)
Cover the viewport, scale proportionally to fit
That said, I suggest the following given your html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.