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;
}
Related
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.
I'm working on a project where a div dynamically shrinks as the page shrinks. Unfortunately the div stays the same height this way:
CSS
.container {
min-height: 180px;
max-height: 350px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
height: 350px;
}
HTML
<div class="container"></div>
Instead of fixed height, use em/vh/% units for height depending on what is suitable. You can also use relative height with min-height and max-height to define a range. For example, try resizing the window and see that container always occupies half of available height.
.container {
height: 50vh;
background: green;
}
<div class="container"></div>
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'm trying to place a video into a container which has 100% width and auto height respecting the aspect ratio but with max-height set. I want the video to fill the entire container even if the sides are cropped and to be centered both horizontally and vertically.
I'm using fit-object property but apparently it doesn't work with max-height.
I'll simplify it with an image. The result should be the same.
HTML
<div>
<img src="...">
</div>
CSS
div {
width: 100%;
overflow: hidden;
}
img {
object-fit: cover;
width: 100%;
height: 100%;
}
Now, if I add to div style height: 100px, it works. If I write max-height: 100px, it doesn't. Is this expected behaviour? If so, what can I do to make it work?
Here is jsFiddle: http://jsfiddle.net/1r4mLvLq/
height: 100%; works only if an ancestor element has an explicit height set.
You can accomplish that by adding this CSS:
html, body {
height: 100%;
margin: 0;
}
Updated Fiddle