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>
Related
I have an image that is e.g. 1000x1000 px. I want to insert it into my web page so that it has 500x300 px. I do not want that it is distorted though. I want it to be zoomed down to 50% of its width (so 500x500 without distorting) and then cropped for 300 in height (i.e. 300 px of the image would be displayed from the top of the image of those 500 px).
I am trying to use a normal img tag but if CSS is needed that is ok too.
Thanks.
You can put the image inside div,
and set the div height, width and overflow hidden;
<div style="width: 500px; height: 300px; overflow: hidden;">
<img src="./1.jpg" alt="" style="width:100%;" >
</div>
Create a div that is 500x300 px in size and set your image as the background image to that div, with its size being cover and position being top.
HTML:
<div id="my-image"></div>
CSS:
#my-image {
width: 500px;
height: 300px;
background: url(your-image-location.jpg);
background-size: cover;
background-position: top;
}
Here's some examples. I think what you want would be #example3. On the other hand, you can also see this working example :)
.fit-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: contain;
background-repeat: no-repeat;
}
.resize-image {
height: 500px;
width: auto;
}
.crop-image {
height: 500px;
width: 300px;
background: url("https://via.placeholder.com/1000x1000");
background-size: cover;
}
<h3>Make the image adapt to the size of the div </h3>
<div id="example1" class="fit-image">
</div>
<h3>Resize an image</h3>
<div id="example2">
<img src="https://via.placeholder.com/1000x1000" class="resize-image" />
</div>
<h3>Crop the image</h3>
<div id="example3" class="crop-image">
</div>
You can achieve this using the following two methods:
Method 1: with CSS and background-image
Ditch the img tag and put your desired image in the background-image property of a div like:
width:500px;
height:300px;
background-image:url('http://unsplash.it/1000/1000');
background-size: cover;
background-position:center;
You can see the working code here.
Method 2: using position:absolute
Put your img tag inside a div and crop out the rest of it using overflow:hidden like:
div{
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
div img{
width:100%;
height: auto;
position:absolute;
left:0;
top: calc(50% - 250px);
}
And the working code.
You should add position,left and top if you want your picture to be vertically centered in the div.
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 am trying to make my background-img round and put it into center. I am trying with code given below:
.jumbotronhh
{
background-image: url('http://simplelize.com/wp content/uploads/2013/03/old-camera-620x350.jpg');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px; *//If I don't use this line then the background picture stays in center in a rectangular form but after using this I got the bg-img circle but it moves at the left side of the screen..*
}
what to do?! I am totally novice.. pls help..
You could put the image behind everything else to look like an actual background-image, by creating a div class and setting some z-index.
<div class="bg-image">
<img src="mybackground.jpg">
</div>
And CSS:
.bg-image {
position: relative;
min-width: 100%;
min-height: auto;
}
.bg-image img {
position: relative;
width: 100%;
height: auto;
z-index: -100;
border-radius: 30px 30px 30px 30px;
}
Since you really can't use the border-radius in background properties.
I tested your code with another picture and it works fine
Let me know if you mean another thing.
HTML:
<div class="jumbotronhh"></div>
CSS:
.jumbotronhh
{
background-image: url('http://goo.gl/amTgah');
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
height: 300px;
width: 300px;
}
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;
}
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.