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/
Related
This question already has answers here:
Center a position:fixed element
(23 answers)
Closed 5 years ago.
I am trying to center image with position fixed in CSS. The code I tried
<style>
.bgimg {
top: 50%;
left: 50%;
position: fixed;
opacity:0.09;
marging: auto;
}
</style>
Refer to https://www.w3schools.com/code/tryit.asp?filename=FJZQPD9BZUBG
For variable width/height content, you'll want to use a percentage offset with a transform, like this:
.bgimg {
top: 50%;
left: 50%;
position: fixed;
opacity:0.09;
transform: translate(-50%, -50%);
}
Or, if you know the width and height, you can avoid using a transform and set all the positions to 0 paired with margin: auto;:
.bgimg {
width: 400px;
height: 400px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
You can see both methods in action, below!
.bgimg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: .5;
}
/* you need to set the width and height on this one, otherwise it stretches it to fill */
.center-something-without-transform {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: blue;
}
<img class="bgimg" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" />
<div class="centered-without-transform"></div>
In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's the fiddle.
HTML
<body>
<div id="background">
<div id="circle1"></div>
<div id="circle2"></div>
</div>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#background {
background-color: red;
height: 100%;
width: 100%;
position: fixed;
transform: translate(0, -100%);
}
#circle1 {
background-color: yellow;
height: 500px;
width: 500px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 0;
}
#circle2 {
background-color: aqua;
height: 400px;
width: 400px;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: fixed;
border-radius: 50%;
z-index: 1;
}
you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically.
The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.
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 am creating a "light box" sort of effect. Without using JavaScript, how can I make the light box resize according to the viewport size so that it always stays in the center of the viewport and occupy 80% of the width and height?
<div class="fullscreen-dim">
<div class="dialog">
<img src="http://placehold.it/300x200">
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0; right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%; // how to respect aspect ratio??
}
.dialog { // dialog should auto-size just big enough to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
a {
position: absolute;
bottom: 5px; right: 5px;
}
In this method http://jsfiddle.net/3Lohtes9/ , the dialog resizes but the image does not respect aspect ratio.
This problem can also be interpreted as one of the "grandparent div" questions on SO. How can I set the image size with respect to full-screendim and let dialog to auto-size to fit?
EDIT: Instead of enclosing the img in the dialog div, I can achieve a similar visual effect of having the border around the image and still have the image resize accordingly when viewport size changes. However, I have no way to place the close button now. Any advice?
Change .dialog height from 80% to auto. See fiddle
.fullscreen-dim {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
.dialog {
padding: 20px;
// to create a"border" around the image;
position: fixed;
background-color: red;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: auto;
}
a {
position: absolute;
bottom: 5px;
right: 5px;
}
edit:
try adding this if you want more control (like a min-height) or simply remove all height and width from .dialog:
width: auto;
max-width:80%;
height:auto;
max-height:80%;
min-height: 100px;
new fiddle
Using the information from this question, you can set the image to be aligned horizontally within the lightbox. Then by removing the height of the image, it will scale correctly with the aspect ratio.
The key CSS changes are here
img {
display: inline-block;
width: 100%;
vertical-align: middle;
}
/* This is a new element, see the question linked above. */
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog {
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
And the HTML
<div class="fullscreen-dim">
<div class="dialog">
<span class="helper"></span>
<img src="http://placehold.it/300x200"/>
<a class="close-button" href="#">CLOSE</a>
</div>
</div>
See fiddle: http://jsfiddle.net/3Lohtes9/7/
Instead of all of this
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 50%; top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 80%;
height: 80%;
}
try
.dialog { // dialog should auto-size just big enought to wrap image
padding: 20px; // to create a "border" around the image;
position: fixed;
background-color: red;
left: 10%; top: 10%;
right: 10%; bottom: 10%
}
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;
}