I made my post thumbnail images of full width and responsive. Because they were so tall, I gotthem cropped at 600px. The problem is that as the screen gets bigger the images crop at the top, not in the center of the image as I want it. Is there any way to make the images crop in the center?
I don't want to use background-image here.
Here is a fiddle.
.large-front-thumbnail {
position: relative;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.large-front-container {
max-height:600px;
overflow: hidden;
}
<div class="large-front-container">
<img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg" class="large-front-thumbnail">
</div>
.large-front-thumbnail {
position: relative;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
transform: translateY(-50%); /* add this line to move your picture 50% up*/
}
To use in all browsers:
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
But I'd suggest you to use background-image case described here
Related
I tried to move hr in center screen on internet explorer and microsoft edge but It's moved to right.
Internet Explorer
Preview Image
Google Chrome
Preview Image
HTML
<div style="width: 100%; height: 100vh; background-color: rebeccapurple">
<hr style="
width: 80%;
height: auto;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
">
</div>
Addition to that why scroll showing in internet explorer
Instead of positioning it relative, do it like that:
<div style="width: 100%; height: 100vh; background-color: rebeccapurple">
<hr style="
width: 80%;
height: auto;
display: block;
margin: 0 auto;
">
</div>
To vertically align you could give the div display: flex, flex-direction: column and justify-content: center, but generally it's not required to vertically align a hr. Instead give it a margin top and bottom.
You should put into consideration normal transform property (and -ms for old browsers)
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
and for the scrollbar, try adding
#-ms-viewport { width: device-width; }
overflow-y: hidden;
UPDATE:
So I did three things:
Add overflow:hidden; to the div
Change 100vh to 100%
Changed left: 50%; to left: 40%;
I have the following jsfiddle:
https://jsfiddle.net/quacu0hv/
I cant figure out how to center this div. The fact that it is rotated makes it hard to actually center the object on screen. How exactly can this be achieved with pure css? I imagine its due to the point of origin that changed its position (upper left vertex of the div).
div {
transform: rotate(-45deg) scale(2) translate(-50%, -50%);
opacity: 1 !important;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background: black;
position: absolute;
}
Try rearranging the transform values and see what happens ;)
Turns out order does matter. If you think about it, it does makes sense:
Rotate > Scale > Translate
Once you've rotated it, the origin has been rotated too. That's why your square moves "left" and "up" from the origin.
Translate > Rotate > Scale
This is what you want to do. Position before you make any other adjustments that can affect the origin.
Use CSS transform-origin: 50% 50% or try 0 0. Remove position: absolute first.
This is at 0 0
This is at 50% 50%
This is at 45% -290% Centered?
Yeah, looks centered to me, see Full Page. Anyways, as you can see from the other answers transform-origin is the best solution. Scott suggested to remove the transform: -50% -50% which makes perfect sense if you wanted the div centered in the first place, but if you wanted that in there still and have it centered as a square in a rectangle (height is smaller than width), then 45% by -290%.
SNIPPET
.box {
position: relative;
}
.center {
transform: rotate(-45deg) scale(2) translate(-50%, -50%);
transform-origin: 45% -290%;
opacity: 1 !important;
width: 200px;
height: 200px;
background: black;
position: absolute;
}
<div class='box'>
<div class='center'></div>
</div>
You could just remove translate(50%, 50%);
div {
transform: rotate(-45deg) scale(2);
opacity: 1 !important;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background: black;
position: absolute;
}
<div></div>
Fiddle
or add transform-origin: 0 0; to start transformations in the upper left corner.
div {
transform: rotate(-45deg) scale(2) translate(-50%, -50%);
transform-origin: 0 0;
opacity: 1 !important;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background: black;
position: absolute;
}
<div></div>
Fiddle
Using transform-origin you can get the result, also scale and rotate goes before positioning.
div {
transform-origin: 0 0;
transform: rotate(-45deg) scale(2) translate(-50%, 50%);
opacity: 1 !important;
width: 100px;
height: 100px;
background: black;
}
<div></div>
jsfiddle: https://jsfiddle.net/quacu0hv/8/
I have a video And I want to change the height and keep the same width For example width on full screen I Think is 100% and Height Just 200px same to this website www.paypal.com
The Problem is when I change the height width also change automatically, And video go to the center(stretched horizontally)
<video autoplay class="embed-responsive-item">
<source src=test.mp4 type=video/mp4>
</video>
video{ width: 100%; height: 200px; }
Thanks Advance For any help
That PayPal website uses the CSS property object-fit: cover to fit the video the same width.
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
.hero-home video {
display: block;
height: 100%;
width: 100%;
top: 0px;
position: absolute;
left: 0px;
z-index: -1;
object-fit: cover; /* this makes it fit within the video container */
opacity: 0.9;
transition: opacity 0.3s ease 0s;
}
Possible values for object-fit
/* Keyword values */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
/* Global values */
object-fit: inherit;
object-fit: initial;
object-fit: unset;
They also are using a mix of max-width, min-width, and min-height on the some of the parent elements of the <video> element.
Just inspect the CSS to see what their doing. You will see that part of the video is being hidden, not displaying all the height of the video on the .video-container using overflow:hidden.
Hi you can give width and height to the container your video is in and then give the video element min-width/height like this the video will stay in the center and only the width will change and not the height.
.container {
width: 100%;
height: 100%;
}
video {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 200px;
width: auto;
height: auto;
}
I'm trying to vertically align the first div at the center of the browser and everything below it below that div.
I may be able to wrap these two divs in another div and centering that div may work, but I can't change this html structure and have to achieve with two divs only. The first div is a dynamic container where different html will be displayed. The second div is static.
.center {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Add width and margin: auto 0 to the css class and apply it to the div elements.
like this:
.center {
margin: 0 auto;
width: 200px;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div class="center">I'm just below the center!</div>
This should work (I added the color only to make it easier to see the result)
.center {
width:750px;
margin-left: auto;
margin-right: auto;
background-color:Red;
}
<div class="center">
I'm at the center of the Browser!
</div>
<div>I'm just below the center!</div>
Summary:
You can use this code that is in the jsfiddle.
I wrote two classes named .center-x and .center-y. You can use these classes when you want to center elements by x and y axes.
The code:
.box-1 {
background: #00adef;
padding: 5px 10px;
}
.box-2 {
background: #ccc;
padding: 5px 10px;
position: absolute;
top: 100%;
width: 170px;
}
.center-y {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.center-x {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.center-x.center-y {
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
<div class="box-1 center-y center-x">
I'm at the center of the Browser!
<div class="box-2 center-x">I'm just below the center!</div>
</div>
And if you want to center by vertical, just remove the .center-x class from .box-1. Else if you want to center by horizontal, just remove the .center-x class from .box-1.
If the browser supports viewport units, you can use this way:
.center {
position: relative;
left: 0;
margin-top:50vh;
}
See it working: http://jsfiddle.net/fgpqkrr4/
Here is my Fiddle : http://jsfiddle.net/4wd6vmjL/
I want to mask a div to show my image skew . but i dont want image to skew.
now there is a gap in mask and image can't fill all mask .
.mask{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
height:200px;
-webkit-transform: skew(-16deg);
-moz-transform: skew(16deg);
-o-transform: skew(16deg);
transform: skew(16deg);
}
Any advice ? Thanks
You need to change your css of .mask class.
.wrapper{
display: block;
height:200px;
background: #f8f8f8 none repeat scroll 0 0;
text-align: left;
-webkit-transform: skew(-16deg);
-moz-transform: skew(-16deg);
-o-transform: skew(-16deg);
transform: skew(-16deg);
border-right:medium none;
margin-bottom: 26px;
margin-left: 44px;
overflow: hidden;
z-index: 100;
width:300px;
}
.mask {
background-image: url("http://www.birds.com/wp-content/uploads/home/bird4.jpg");
background-position: center top;
height: 480px;
transform: skew(16deg);
width: 430px;
padding-left: 70px;
}
<div class="wrapper">
<div class="mask">asdassadd</div>
</div>
Just add the image inside another div and counterskew it with the exact opposite. The hardest bit is positioning your div now, which would take some tweaking - depending on the angle your inside div needs to be bigger. I have also positioned it at the center of the wrapping div.
.mask {
position: relative;
left: 100px;
width: 200px;
height:200px;
overflow: hidden;
-webkit-transform: skew(-16deg);
-moz-transform: skew(-16deg);
-ms-transform: skew(-16deg);
transform: skew(-16deg);
}
.mask > * {
position: absolute;
left: 50%;
top: 50%;
width: 370px;
height:370px;
color: #fff;
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
-webkit-transform: skew(16deg) translate(-50%,-50%);
-moz-transform: skew(16deg) translate(-50%,-50%);
-ms-transform: skew(16deg) translate(-50%,-50%);
transform: skew(16deg) translate(-50%,-50%);
}
<div class="mask"><div>This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.This is just text to show your skew is now undone. This is just text to show your skew is now undone. This is just text to show your skew is now undone.</div></div>