How do I vertically center an image while using object-fit: cover? I would like the image to always be 100% of the width of its container, and the top and bottom of the image to be cropped when the height of the container is smaller than the height of the image. object-fit: cover only crops the bottom of the image by default. In the example below, I want the center of the image to always be directly behind the text.
header {
max-height: 20em;
position: relative;
}
h1 {
position: absolute;
text-align: center;
top: 0;
transform: translateY(-50%);
width: 100%;
}
img {
object-fit: cover;
opacity: 0.2;
z-index: -1;
}
<header>
<h1>Page Title</h1>
<img src=https://upload.wikimedia.org/wikipedia/commons/9/92/Widdringtonia_whytei_Mulanje_Malawi.jpg>
</header>
Check out object-position in MDN docs.
Related
I want to hide the bottom part of the image and only display the top 90% of the image,
I've tried to use
transform: translateY(10%);
and adding to the parent div the following property:
overflow: hidden;
but this makes an empty 10% on top of the image, I do not want empty space on top of the image how can I achieve that?
You could absolute position the image in a relative container with overflow: hidden. Just make sure the parent div is actually 90% of the height and the image is positioned top: 0%.
If you want to do it this way, I would suggest that you set the height of the image to 110% instead of 90%:
HTML:
<div class="image-container">
<img src="...">
</div>
CSS:
.image-container {
background-color: steelblue;
height: 600px;
overflow: hidden;
}
.image-container img {
height: 110%;
}
or if you know the size of the image, you can use object-fit and object-position. Let's say that the height of the image is 500px, then 90% of it would be 450px, then your css would be:
.image-container img {
height: 450px;
object-fit: cover;
object-position: top;
}
the problem is simple if you check this website: my demo website here on mobile,
you will see image looks weird, is there a way to prevent it?
also in desktop mode happens the same, i am newbie in css and responsive design. thank you
all the images are on 4160x3120 px
css code:
<style>
html,
body {
width: 100vw;
height: 100vh;
box-sizing: border-box;
margin:0;
padding:0;
}
#slider {
height: 100%;
width: 100%;
overflow: hidden;
background-size: cover;
}
#slider * {
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100% !important;
width: 100% !important;
}
.centered {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
</style>
html code:
<div id="slider" class="wow fadeIn" data-wow-delay="1s">
<img src="images/home-bg-slideshow1.jpg">
<img src="images/home-bg-slideshow35.jpg">
<img src="images/home-bg-slideshow15.jpg">
<img src="images/home-bg-slideshow16.jpg">
<div class="wow fadeInUp centered" data-wow-delay="0.3s" style="z-index: 800;
font-weight: 1000;font-size: 50px;color: #f7b600;"></div>
</div>
thanks
background-size: cover;
Your code background-size: 100% 100%; means that you want your image to fit both width and height, which is not the case, you want your image to fit its content in the given dimensions. 100% image size is applied only when you don't care about the image height/width ratio being respected
You can set fixed height to your image and add object-fit: cover to prevent picture from distortion.
I have the following code:-
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 565px;
display: block;
background-size: cover !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
What I want to achieve is:-
When you start shrinking the browser width from 1920px to 1170px it will cut off (crop) the left and right part of the image.
So if the browser width was at 1720px, essentially 100px will be removed from the left side of the image and 100px removed from the right but the image will retain the 565px height.
How can I achieve this?
I have made a JSFIDDLE of the code I have at the moment.
Use these settings for the background:
.expert-header {
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center center no-repeat;
background-size: auto 100%;
}
-> i.e. height 100% of parent element, width proportional to height (auto), centered in both directions (where only the horizontal centering is effective) and witout repeating.
Here's a fiddle: https://jsfiddle.net/q3m23Ly8/1/
(I also removed the style attribute from the HTML)
Remove the inline style of the div element because it will overwrite the CSS rules:
background-size: auto 100%;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg) center;
The important part is the background-size. auto 100% will tell the browser the background should always cover 100% of the height, the width will be calculated automatically.
Try below css for responsive:
Set the div height as per you needed.
.content {
width: 100%;
text-align: center;
overflow: hidden;
}
.expert-header {
position: relative;
width: 100%;
height: 250px /* Set height as per you needed */;
display: block;
background-size: 100% auto !important;
background: url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg);
background-repeat: no-repeat !important;
}
<div class="content">
<div class="expert-header" style="background:url(http://igoffice.m360.co.uk/wp-content/uploads/2016/08/paul-expert-header.jpg)" ;="">
</div>
</div>
So after a long time of searching, I finally found out how to crop an image without distorting/squashing an image using overflow: hidden;.
Now my next problem; How would I have the image show a part I want, meaning, when using the overflow:hidden it shows the image from the top of it rather than the middle or bottom. How can I adjust that and show the image from the bottom or middle? To help give a better understanding, please view the images below which I created in photoshop. Image description in order: default image, what css does in default with overflow: hidden, what I want (middle pov), what I want (bottom pov).
Thanks.
Edit: My layout is: parent div with the image div as the child. Parent div's height defined at 600px and width at 100%. And height and width of image div defined as 100%.
Assuming your desired width/height and overflow: hidden is applied to an outer containing div, you can add something like:
.container img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
This would move the displayed area of the image down 50% of the container height (top: 50%), then back up 50% of the image height (transform: translateY(-50%)), which ends up centering it inside the container.
You can adjust these values to achieve different positioning, or add in left: and transform: translateX() to adjust the horizontal axis.
In which way are you using this image?
If you're using this as a background image the solution is much simpler and would simply involve using background positioning. If you're using this as an image pulled in using an img tag you can try the below to manipulate the image.
Be aware that this won't work on every browser.
.new-image-container {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
}
.new-image-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-90%);
-ms-transform: translate(-50%,-90%);
transform: translate(-50%,-90%);
}
<div class="new-image-container">
<img src="http://i.stack.imgur.com/j8aQR.jpg"></img>
</div>
Here is my answer/solution for anyone that comes across this post.
#Banner {
width: 100%;
height: 350px
}
#backgroundBanner {
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBanner img {
width: 100%;
position: relative;
top: 70%; /*make changes to this and below to adjust the positioning of the image*/
transform: translateY(-70%);
<div id="Banner">
<div id="backgroundBanner">
<img src="https://www.mathworks.com/matlabcentral/mlc-downloads/downloads/submissions/55312/versions/4/screenshot.jpg">
</div>
</div>
I want to center an image on top of my background image.
#home is the background image that stretches to the size of the browser
#hometitle is the image i want on top
I would like to center #hometitle on top of my #home background so no matter the size of the browser, it'll be spaced into the center of the background image.
I have tried margin: 0 auto; and then margin-top: 250px; right after, but that just creates a white gap above the entire background image of 250px;
Position: absolute; and top/left don't really help because the position will be static and not be center as you resize the browser.
#home {
height: 1000px;
margin: 0 auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("images/bigheader.png");
}
#hometitle {
background-image:url(images/title.png);
height: 260px;
width: 435px;
}
HTML:
<div id="home">
<div id="hometitle">
</div>
</div>
#hometitle {
background-image:url(images/title.png);
height: 260px;
width: 435px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -217px;
}
This should do since we postion the home title image absolutely at the center of the browser rendering space.
If you are having some issues with the position of image add
body {position: relative;}
This is one of the easiest and best techniques to position an element at the center that i use often
You can't use margin-top to move the <div id="hometitle"> down relative to the <div id="home"> because of margin collapsing, but you could add top padding on the <div id="home"> instead.