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>
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;
}
As the question says, I am trying to center a div on the middle of the screen both horizontally/vertically and resize it at the same time.
I do not have any problems on resizing the content when the screen is smaller even to center the wrapper when it is displayed on big screens, the problems comes when I try to resize the screen and, as the wrapper has a max-height property, it does not never vertically center when resize the screen (because it occupy 300px all the time).
I would like that the div that is centered (wrapper) never will be more than 300px and will be always centered (both vertically/horizontally).
Here is my code:
HTML:
<div id="wrapper">
<div id="content">
</div>
</div>
CSS:
html{
width: 100%;
}
body{
width: 100%;
background-color: red;
margin: 0;
}
#wrapper{
position: absolute;
max-width: 300px;
max-height: 300px;
width: 100%;
height: 100%;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
background-color: yellow;
}
JSFiddle.
I tried a lot of configurations and looked a lot of questions here on StackOverflow but any of them worked for me because most of them are only for horizontally/vertically center or resize a div, but not both.
Note: I cannot use flexbox and I would like to maintain as much as possible the actual CSS code, if possible.
How can I avoid to use max-height (that is broken my vertically centering) and get the same behaviour?
EDIT: The div is already centered both vertically/horizontally. What I want is that the square will be always a square and always be centered. I am sorry if I do not put it very clear.
Now the content is being resize as I want (as a square), the problem is only with vertically align at the same time it resizes.
EDIT 2: If you want to see the effect that I refer in the above edit, resize the screen on my example JSFiddle horizontally and you will see the effect.
Thanks in advance!
You can easily do this with CSS3 transform. It depends of the browsers support you want to offer.
I would suggest to place your content absolute at 50% of your wrapper. Then, you can use a negative translate of 50%. top: 50% and left: 50% will place your content top left corner in the middle. Negative translate of 50% (translate(-50%, -50%)) will move your content half of its width to the left and half of its height to the top.
#content{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can see your updated jsfiddle
EDIT
I misunderstood a part of your question the first time. But you can easily merge a part of your solution and mine to get what you want.
You just need to replace height: 100%; with padding-bottom: 100%; of my previous answer above:
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See this updated jsfiddle.
Maybe I'm missing something(?), but it looks like you can just add height:100%; to your #content css instead of padding-bottom and it works:
https://jsfiddle.net/puajxgsz/
Also, I played with another way to do it without absolutely positioning anything...because, well, it was sort of interesting:
https://jsfiddle.net/j0ch7oxj/
I have a square image that I want to have centered on the screen. Problem is that I want the image to stay a square, while being not more than 80% of both the width and the height. I have used the following code, which makes my image 80% of the height (when height < width), and centers the image vertically, but not horizontally of course. When using a fixed width, I could have used margin-left: 50%; margin-right: 50%, but with relative size, this would set the left side of the image at 50%. Any ideas?
.my_img{
max-width: 80%;
max-height: 80%;
margin-left: 10%;
margin-top: 10%;
}
Try this:
.my_img_container {
position: relative;
}
.my_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Here is a fiddle:
http://jsfiddle.net/l0wskilled/voubtxrt/
if your image has display: block then you can probably use margin: auto auto and remove the % margins. If its display is inline or inline-block, you can use text-align: center on the parent element of the image to make it horizontally centered. I have not tested this code. If this doesn't work, and you have no problem with jQuery, this can be done with few lines of jQuery.
You could also try:
<div class="container">
<img src="https://www.webkit.org/blog-files/acid3-100.png" class="my_img" />
</div>
With the style:
.my_img {
max-width: 80%;
max-height: 80%;
margin-left: auto;
margin-right: auto;
display: block;
}
I think this is what you are wanting anyway, maybe i'm wrong!
https://jsfiddle.net/dLozvcmo/2/
I have a container element with long content which is scaled:
.container {
transform: scale(0.9);
}
inside this container I have a child div which is used to be a popup. It's positioned absolute with top 50%
.popup {
width: 300px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
}
but unfortunately when container is scaled this 50% is not working. I need to use ~240% if it appears on the bottom of a page.
Do you now some specifics on applying positioning on children of scaled elements?
DEMO: http://labs.voronianski.com/test/scaled-positioning.html
Add to .wrap:
.wrap {
...
position: relative;
/*some prefix*/-transform-origin: 0 0;
}
You'll need to reposition the .popup (now the reference frame is the .wrap, instead of the html element), but in Chrome the scale toggle works fine after this change.
See: When using CSS Scale in Firefox, element keeps original position
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}