I need to Center and crop image with CSS. I have followed this article.But device UI output is somewhat different. Can you explain the behavior of this?
This is the use case:
We don’t want to actually crop - just display the middle of the image.
Some of the docs people will upload will be docs so don’t want this to
be stretched.
My question is I don't know why it transforms (1 image) landscape mode even though I got the image using portrait mode? Any explanation?
photo {
.photo {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.portrait {
width: 100%;
height: auto;
}
}
}
<div class="photo">
<img [src]="data?.url class="portrait">
</div>
UI:
1 - It shows when I used the device in portrait mode
2 - when I used device in landscape mode
Runtime code:
You can achieve it by
img {
object-fit: cover;
}
It works the same as background-size: cover but it's used for img tags instead of background images
Reference
Related
I have problem on Chrome browser while combining two properties: filter: blur(15px) and transform: scale3d(1.2,1.2,1).
I have two images, one over another. Image on higer layer is blurred, but it's edges got transparent when I applied that filter, so I added overflow:hidden to parent div, and scaled up image. I expected to see just opaque part of image.
It works as expected on Firefox and Opera, however on Chrome and MS Edge browsers not. How to fix this?
#images-box{
position: relative;
width: 500px;
height: 280px;
overflow:hidden;
}
.image{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://images.unsplash.com/photo-1558389157-a986a38f3431?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');
background-size: cover;
background-position: 50% 50%;
}
.image.blured{
-webkit-filter: blur(14px);
filter: blur(14px);
z-index: 2;
-webkit-transform: scale3d(1.2,1.2,1);
transform: scale3d(1.2,1.2,1);
}
<div id="images-box">
<div class="image"></div>
<div class="image blured"></div>
</div>
Changing scale3d(1.2,1.2,1) to scale(1.2) helped me on Chrome 86.0.4240.198.
I have a background image with some objects like a company logo. This image is a full screen background and I want to align an element with the company logo and make it responsive.
I have searched for some similar solutions and tried using a solution proposed in this link:
How to position an element relative to the background image width
Although I am able to position the element correctly, it doesn't remain in the same place relative to the image when the screen is resized.
How can I keep this html element always aligned?
body {
width: 100%;
height: 100%;
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.container{
position: relative;
}
.fixed-title{
position: absolute;
top: 0;
margin: 28% 0 0 54%;
}
<div class="container">
<h1 class="fixed-title">Apple</h1>
</div>
Edit: Coupled with what I wrote below, this should be what you're after :) All that is left to do is change the percentages to match the position you're after. If you need to move something in px you can use calc() css function to do
height: calc(100% - 100px);
This would make your thing 100% of the height - 100px.
body {
width: 100%;
height: 100%;
position:relative
background-image: url("http://www.rizwanashraf.com/wp-content/uploads/2008/11/mac-wallapers-13.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
}
.title-container{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
<body>
<div class="title-container">
<h1>My Title</h1>
</div>
</body>
It looks like you are halfway there already having used postionion:absolute already.
I would suggest instead of using margin:28% 0 0 54% to look into using the transform property coupled with translateX() and translateY() or the shorthand version translate( , );.
The solution below puts your title in the very center of the container.
.fixed-title{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
This solution only centers your h1 on the Y axis (up and down)
.fixed-title{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
This solution only centers your h1 on the X axis (left and right)
.fixed-title{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Hopefully this helps :)
P.s. Here is a link to a great article on all the uses for the transform property : https://css-tricks.com/almanac/properties/t/transform/
Can I borrow someone's eyes before I drop kick this damn thing out the window?
SHORT VERSION: What's the right way to x,y center a div reliably in IE9 when it can not be fixed height/width?
Scenario: I'm customizing the templates of ping federate server that we pass through a windows store app for auth. I mention this because windows store apps (Not to be confused with UWP) uses a jank version of IE9.
My problem...which I can't even go make a damn codepen for since they don't support IE9 anyway....is I'm just trying to center the first child div both vertically and horizontally.
Now then, IE9 doesn't support flexbox, so no love there. I am however able to do;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
which does indeed center it nicely, looks great on everything EXCEPT IE as it displays a large white space at the bottom of the screen. Which in turn, also causes scrollbars to appear which aren't even necessary...
Since the div can not be of a fixed width/height I have not gotten other fixes to work. It also doesn't help I've been doing .NET stuff so long my css is rusty.
So can someone start my weekend off right and enlighten me to some IE Kung Fu fix so I may praise your name and toast beer to you this evening? :)
Hopefully the snippet below (ran in IE as IE9) will help visualize my issue with this stupid whitespace at the bottom that has become my nemesis...
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url("https://static.pexels.com/photos/1350/blur-blurred-background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
}
div {
min-width: 250px;
min-height: 250px;
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div></div>
the old way was with an extra element, but a pseudo will do for IE9 :
html, body, body:before {
height: 100%;
text-align: center;
}
body:before {
content: '';
display: inline-block;
margin-left: -0.25em;
width: 0;
vertical-align: middle;
}
div {
min-width: 250px;
max-width: 99.5%; /* or white-space on body for security to avoid div wrap under pseudo,
do not forget to reset to normal if you choose so */
min-height: 250px;
background: green;
display: inline-block; /* i'll be against top or left without disappearing if window is too small */
vertical-align: middle;
/* text-align: left; */
}
/* not IE 9 , bg-cover ? */
body {
background-image: url("https://static.pexels.com/photos/1350/blur-blurred-background.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: fixed;
}
<div></div>
I have a full screen background image for my website landing page with my logo in the centre. The website uses Bootstrap and is fully responsive. The logo is vertically and horizontally aligned in my browser window and when the window is resized the logo correctly stays in the centre. But when viewing on a phone or tablet the image background images resizes correctly but the logo does not stay in the centre of the page, but is situated to the right of the screen with half of it obscured.
Any ideas on how I might rectify this? The website landing page is live you can find it at www.burnser.com
Here's the code:
<img alt="full screen background image" src="img/bg.jpg" id="full-screen-
background-image" />
<div class="centered">
<a href="work.html"><img src="img/home_logo.png" alt="BB Logo" width="200"
height="137"></a>
</div>
And here's the CSS I'm using:
#full-screen-background-image {
z-index: -999;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Any help would be much appreciated.
Looks fine on my phone. Try another browser and also try to prefix transform.
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Btw, 1MB background image is huge. You should blur that noise out to reduce size of image.
im creating simple website. On desktop, whole content is centered ok. It works also with changing size of browser.
But when I visited it on mobile, everything is not centered like on desktop
Take a look: http://piaskownica.lokalnamanufaktura.pl/metod2/
I think that my css wrap class for centering is buggy. Videobackground also is not centered on desktop.
.wrap {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
}
.x2-horizontal has a width of 380px that is too wide for small screens. Watch out for fixed widths in responsive designs.
Your layout method is not ideal. For a start, think of devices that don't support transform.
The video control won't center using margin: auto because of position: absolute. You'd have to use the same kind of centering methos as for the other content (i.e. left: 50% and then pulling it back 50% of its width.)
The issue is that the wrap is getting crushed too small to contain all of the elements. Perhaps you could use a media query to reduce their size on mobile. A simple solution for this case would be
#media (max-width: 600px) {
body {
zoom: .8;
}
}
which would reduce the size of the whole body to 80% so that it doesn't overflow and wrap to new lines. In addition, if you want to center your background video, try changing the bottom and right to 50% instead of 0 in the #video_background, and also add your transform lines onto that.
#video_background {
position: fixed;
bottom: 50%;
right: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(50%) translateY(50%);
}