I am using
object-fit: cover;
in order to have an image fill a div of a fixed size, like this
.home img {
object-fit: cover;
width: 650px;
height: 300px;
}
However, the image is cropped equally all around, as I have text in the bottom right of the image, I want to have cover to crop from the left and top.
Is this possible?
I tried all the object-fit methods and object-position, but none give the desired behaviour.
You can add a object-position to the img, bottom right in this case.
img {
width: 200px;
height: 200px;
object-fit: cover;
/* added */
object-position: bottom right;
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2880px-Google_2015_logo.svg.png" />
Related
I use an image as a background image, background-image: url(), and I also use this image placed inside <img src="">
It looks like the height of src image is shorter the height of the background image.
If I set a height for src image equals height of the background image, the src image will be disturbed.
What CSS properties should I set to make src image have the same height as background image, but it won't disturb the src image? Please note: I need to adjust ONLY in src image, not background image.
Please take a look at my sample in jsfiddle
HTML
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
CSS
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
/* height: 353px; */
}
Please note: Because the image I use is long, I have to set width: 100% for img. If I don't set that, a navigation bar will show at the bottom of the browser.
Consider object-fit and object-position
.imageBG {
background-image: url("https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
}
img {
width: 100%;
height: 353px;
object-fit:cover;
object-position:center;
display:block; /*to make it behave as div and avoir whitespace issue*/
}
<p>
This is background image
</p>
<div class="imageBG">
</div>
<p>
Below is a front image. Its height looks like less than the height in background image.
</p>
<div>
<img src="https://library.danahall.org/wp-content/uploads/2019/04/2560px-Bufo_periglenes2.jpg">
</div>
Related for more details: Object-fit On A Canvas Element
Add position:fixed in CSS class. Then you can adjust the height.
.imageBG {
background-image: url("https://library.danahall.org/wp-
content/uploads/2019/04/2560px-Bufo_periglenes2.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 353px;
position:fixed;
}
img {
width: 100%;
height: 353px;
}
Just add a class to the img containing div and set its height to 353px.
.image-container {
height: 353px;
}
img {
height: 100%;
width: 100%
}
As i see you src image is right and what you background image is doing is scaling the image to make it fit 100% and also your 353px, so your src image height was'nt wrong, it was the backgorund
if you use math and right proportions you would get this:
height: 252px; // this is the right proportions
right math one
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>
I have this in my css file:
.apiscar1 {
object-fit: none;
object-position: -354px 0;
width: 85px;
height: 155px;
}
.apiscar2 {
object-fit: none;
object-position: -189px 0;
width: 155px;
height: 155px;
}
And I call the sprite.png img src on my wordpress page.
This works perfectly for a lot of images placed into the sprites.png but it doesn't work in IE. How do I make it work in IE?
Object-fit and object-position are not supported in IE/Edge.
I use a workaround where I set the image as a background on an element, background-size can be used as replacement for object-fit and background-position for object-position
Here is a jsfiddle with your example. https://jsfiddle.net/124f0hve/
.apiscar1 {
background-image: url("http://lorempixel.com/400/200/");
background-size: cover;
background-position: -354px 0;
width: 85px;
height: 155px;
}
.apiscar2 {
background-image: url("http://lorempixel.com/400/200/sports/");
background-size: cover;
background-position: -189px 0;
width: 155px;
height: 155px;
}
I used lorempixel images, you get random images on every change. If you look in the network, you will see the full image that was fetched and on the screen it shows only a portion of it.
I hope this helps.
Make some div with position: relative as a wrapper and image position set as a absolute. Then use top, right, left, bottom to set position of image. This is workaround for object-positioning for IE.
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;
}
Here is a Codepen with the problem I have:
http://codepen.io/rasmus/pen/pvXjOG
html:
<div></div>
css:
div {
background: url("http://placehold.it/600x300");
background-size: cover;
max-width: 600px;
height: 300px;
}
When I'm now resizing the div - because my viewport is narrower than 600px e.g. - the background image is "cropped" to the left side. But I want to have it "cropped" on both sides, so that I can still see the middle of the picture.
What's my mistake? I know it can be done. An Example would be http://comfortzonecrusher.com e.g.
Just use this:
background-position: center;
So your CSS becomes:
div {
background: url("http://placehold.it/600x300");
background-size: cover;
background-position: center;
max-width: 600px;
height: 300px;
}
Updated Codepen: http://codepen.io/anon/pen/xbowmZ
Try background-size: contain; on your div.