I'm currently aligning an image to the bottom of my div as well as centering it with the following css:
html:
<div class="hello">
<img src="http://bit.ly/1gHcL8T" class="helloImage" />
</div>
css:
.hello {
width: 80%;
height: 200px;
position: relative;
}
.helloImage {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
bottom: 0;
}
However, I want to make this image also responsive by giving it a width as percentage. How would I accomplish this?
JSFiddle:
http://jsfiddle.net/8e7UM/1/
If you're supporting modern browsers, you can do this.
.helloImage {
left: 50%;
bottom: 0;
width: 80%;
position: absolute;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
And here is the basic version, without the fancy transforms.
.helloImage {
left: 10%;
right: 20%;
bottom: 0;
position: absolute;
}
Related
I have a play image which needs centering over another image. I'm using percentages, to try to have it working on all devices, but the percentages are not acting like they should. I have taken screenshots of the mobile site in portrait and landscape, you can find them here http://imgur.com/a/gN53f
The desktop site has an entirely different row which is hidden on small devices, the code below is visible exclusively on the mobile site.
Here's the css:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 30%;
left: 43%;
z-index: 2;
}
working, sort of. The HTML:
<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>
I made your .image1 class a block element, centered the image and using transform property brought image2 in the center
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
margin: 0 auto;
display: block;
z-index: 1;
}
.image2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
<div class="container">
<div class="parent">
<img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
<img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
</div>
</div>
You’ve set .image1 to be relative, but this won’t have an impact on .image2 since it is not a child of .image1. Also it is unclear what sizes the images will have.
If the second image should always scale up and down with the first one, keeping it’s position, it could be done like so:
.parent {
margin: 0 auto;
max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */
position: relative;
}
.image1 {
display: block;
width: 100%;
}
.image2 {
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
.image2 would have a 25% distance of .image1’s height/width to top, left and right.
Changed size of image to demonstrate properly
Gave width to parent div to absolute position
.parent {
position: relative;
top: 0;
left: 0;
width: 300px;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 32%;
left: 32%;
z-index: 2;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<img class="image1" src="https://placehold.it/300x300"/ alt="1">
<img class="image2" src="https://placehold.it/100x100"/ alt="2">
</div>
</body>
</html>
I your first image dictate the size of the parent container, then you should position your images like this (for my code, I've use divs with fixed size. You could give your images display: block)
.parent {
position: relative;
border: 2px solid gray;
}
.child-1 {
height:300px;
width: 300px;
background: lightgreen;
margin: 0 auto;
}
.child-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
height: 50px;
width: 50px;
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
About responsiveness, use 'media query'
set width for image 2, for example, 50%
now set left: 25%
I'm trying to center an element with percent, but it don't work! Have I missed something or is the way I'm doing it impossible?
When I'm using this setting, the element is almost touching the top of the browser area.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
}
Because everything is in %, you should just define width + height and top + left positions, not margin:
.modal-box {
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
JsFiddle: http://jsfiddle.net/ghorg12110/ob29nn2u/
html,
body {
width: 100%;
height: 100%;
}
.modal-box {
background-color: red;
height: 50%;
left: 25%;
position: fixed;
top: 25%;
width: 50%;
z-index: 1000;
}
<div class="modal-box"></div>
Instead of margins, use a transform. This will center the box regardless of height/width.
.modal-box {
position: fixed;
z-index: 1000;
width: 50%;
height: 50%;
top: 50%;
left: 50%;
background: red;
transform: translate(-50%, -50%);
}
<div class="modal-box"></div>
If you want to center with percents, you will need to know the width of an element.
so say modal-box was 300px wide, you would do something like this:
.modal-box{
width:300px;
position:fixed;
left:50%;
margin-left: -150px; /*1/2 of your divs width*/
}
Why are you adding
margin-top: -25%;
margin-left: -25;
That negates the position: fixed of what you were trying to achieve. Remove those two lines and you will see how you can have your fixed position of the element.
If you want it relative to the viewport (irrespective of parent), then make use of the viewport-relative-lengths
.modal-box {
border: 1px solid #000;
position: fixed;
z-index: 1000;
width: 50vw; height: 50vh;
top: 50vh; left: 50vw;
margin-top: -25vh; margin-left: -25vw;
}
<div class="modal-box"></div>
I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I lost it. Is there any css rule that I can, lets say, increase the height of the top and bottom right corners?
JSFiddle
Thank you
You could use skewed pseudo elements for this (ensuring the skews are on the pseudos, and not the element itself):
div {
position: relative;
height: 200px;
width: 80vw;
margin: 10vw;
}
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 90%;
width: 100%;
-webkit-transform: skewY(5deg);
-ms-transform: skewY(5deg);
transform: skewY(5deg);
background: gray;
z-index: -1;
}
div:before {
content: "";
position: absolute;
height: 90%;
width: 100%;
left: 0;
bottom: -20%;
background: gray;
-webkit-transform: skewY(-5deg);
-ms-transform: skewY(-5deg);
transform: skewY(-5deg);
z-index: -1;
}
html {
background: url(http://placekitten.com/g/300/300);
}
<div>Content!!</div>
I have an issue when im trying to make a picture resizable, i explain:
I have a div "overlay" that will fit the window;
Inside this div i have another div "imgActive" that will contain some pictures centered on the window;
Theses pictures inside has to fit the window no matter their size.
But, as you can see on this fiddle the picture inside fit horizontaly (the width change) but when you resize the window vertically, that doesn't resize at all (the height is still the same).
.overlay {
background: rgba(0, 0, 0, 0.7);
height:100%;
position: fixed;
width: 100%;
top: 0;
z-index: 999;
}
.imgActive {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
max-height: 100%;
max-width: 100%;
position: absolute;
top: 50%;
z-index: 1000;
}
.imgActive img {
max-height: 100%;
max-width: 100%;
}
What can i do to make it works? To change the height ?
Thanks for your time.
You can use css directly on img. This method maintains the Aspect Ratio of the Picture
Demo
http://jsfiddle.net/ykf6b5ot/
CSS (adjust the min and max % to suit the image size you like)
img {
max-width:70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Or you can use a single class
HTML
<div class="overlay">
<img class="image" src="https://pbs.twimg.com/profile_images/471998783933251584/IF367cAS.jpeg" alt="" />
</div>
CSS
.image {
max-width:50%;
max-height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/1w9s9wx7/
For the wrapper imgActive you do exactly the same as the image CSS and adjust the height/width % you like. 100% is full screen
CSS
.imgActive {
-webkit-transform: translate3d(0px, 0px, 0px);
height: 50%;
width: 50%;
z-index: 1000;
border:1px solid red;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Demo
http://jsfiddle.net/z69t00ns/
I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself.
So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/
This is using a transform of 1000% to move them offscreen which is obviously not a good thing to do as if the display is massive it won't work and it means each div ends up a different distance from off the screen edge so the animations can end up taking quite a different amount of time to complete depending on their original size.
What i want to do it move them all just offscreen based on the viewport width/height (and the related direction).
This can easily be done by animating the top/left positions but this is obviously not optimal on all devices (see http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)
Is there anyway to do this using CSS3 transforms or even keyframes or am i stuck having to animate the left/top positions?
The CSS from the JSfiddle is:
html, body {height:100%; width: 100%; padding:0; margin:0;}
#wrapper {width: 100%; height: 100%; overflow: hidden;}
#container {width:50%; height: 50%; margin: auto; position: relative;}
#container div {
background-color: red;
position: absolute;
height: 25%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 2px solid #000000;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-o-transition-duration: 600ms;
transition-duration: 600ms;
cursor: pointer;
}
.zoomleft {
-webkit-transform:translate(-1000%);
-moz-transform:translate(-1000%);
-ms-transform:translate(-1000%);
-o-transform:translate(-1000%);
transform:translate(-1000%);
}
.zoomright {
-webkit-transform:translate(1000%);
-moz-transform:translate(1000%);
-ms-transform:translate(1000%);
-o-transform:translate(1000%);
transform:translate(1000%);
}
.zoomtop {
-webkit-transform:translate(0, -1000%);
-moz-transform:translate(0, -1000%);
-ms-transform:translate(0, -1000%);
-o-transform:translate(0, -1000%);
transform:translate(0, -1000%);
}
.zoombottom {
-webkit-transform:translate(0, 1000%);
-moz-transform:translate(0, 1000%);
-ms-transform:translate(0, 1000%);
-o-transform:translate(0, 1000%);
transform:translate(0, 1000%);
}
div.d1 {
width: 50%;
top: 0;
left: 0;
}
div.d2 {
width: 50%;
top: 0;
left: 50%;
}
div.d3 {
width: 25%;
top: 25%;
left: 0;
}
div.d4 {
width: 25%;
top: 25%;
left: 25%;
}
div.d5 {
width: 25%;
top: 25%;
left: 50%;
}
div.d6 {
width: 25%;
top: 25%;
left: 75%;
}
div.d7 {
width: 50%;
top: 50%;
left: 0;
}
div.d8 {
width: 50%;
top: 50%;
left: 50%;
}
div.d9 {
width: 50%;
top: 75%;
left: 0;
}
div.d10 {
width: 50%;
top: 75%;
left: 50%;
}
Thanks everyone,
Dave
Fortunately, since everything is fluid according to the viewport, you can still use percentages in the transform. See my Fiddle - http://jsfiddle.net/K3uPY/23/
One thing I did have to change was make sure #container was in the absolute center. I have also drastically simplified the JS and moved all of the positioning into the CSS.
HTML
<div id="wrapper">
<button id="movebtn">Move</button>
<div id="container">
<div class="box d1 active">1</div>
<div class="box d2 active">2</div>
<div class="box d3 active">3</div>
<div class="box d4 active">4</div>
<div class="box d5 active">5</div>
<div class="box d6 active">6</div>
<div class="box d7 active">7</div>
<div class="box d8 active">8</div>
<div class="box d9 active">9</div>
<div class="box d10 active">10</div>
</div>
</div>
JAVASCRIPT
$( "#movebtn" ).on('click', function() {
$('.box').toggleClass('active');
});
CSS
html,
body {
height:100%;
margin:0;
overflow: hidden;
width: 100%;
}
#wrapper {
height: 100%;
overflow: hidden;
width: 100%;
}
#container {
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
background-color: red;
border: 2px solid #000000;
box-sizing: border-box;
cursor: pointer;
height: 25%;
position: absolute;
transition-duration: 600ms;
}
.box.active {
transform: none;
}
.d1 {
width: 50%;
top: 0;
left: 0;
transform: translateY(-300%);
}
.d2 {
width: 50%;
top: 0;
left: 50%;
transform: translateY(-300%);
}
.d3 {
width: 25%;
top: 25%;
left: 0;
transform: translateX(-300%);
}
.d4 {
width: 25%;
top: 25%;
left: 25%;
transform: translateX(-400%);
}
.d5 {
width: 25%;
top: 25%;
left: 50%;
transform: translateX(400%);
}
.d6 {
width: 25%;
top: 25%;
left: 75%;
transform: translateX(300%);
}
.d7 {
width: 50%;
top: 50%;
left: 0;
transform: translateX(-200%);
}
.d8 {
width: 50%;
top: 50%;
left: 50%;
transform: translateX(200%);
}
.d9 {
width: 50%;
top: 75%;
left: 0;
transform: translateY(300%);
}
.d10 {
width: 50%;
top: 75%;
left: 50%;
transform: translateY(300%);
}