CSS:
.absolute-centered {
max-width: 100%;
max-height: 100%;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: absolute;
right: 0;
top: 0;
height: auto !important;
width: auto !important;
zoom: 10
}
HTML:
<img src="http://funnyasduck.net/wp-content/uploads/2012/09/Internet-Explorer-Meme.jpg" class="absolute-centered" />
It appears that IE (9, 10) ignores max-width and max-height. Why that's happening?
JSFiddle also available here.
max-width and max-height correspond to the parent element. For example:
#parent{
width:500px;
max-width:500px;
height:100px;
max-height:100px;
background:#FF0000;
}
.child{
max-width:100%;
max-height:100%;
}
There are many ways of positioning an image into the centre of an element, but without seeing your parent element I can't suggest what method would be best.
For Div's I've used:
div#parent{
width:500px;
height:500px;
background:#FF0000;
}
div#parent>img.child /*your child element*/{
width:50%;
height:50%;
margin:auto;
background:#00FF00;
}
bare in mind though that margins and paddings can throw off positioning, widths and heights. Some elements (divs) require content to be 'visible'. Using a position:absolute; will position the element relative to it's static position and I don't think you want to use this to position an image in the centre. Another suggestion is that if your parent element is a fixed pixel size, why not make the child image the same size? Or use the image as the parent's background image?
Related
I'm building a web application in which I want a specific element to scale relative to it's parent. As far as I know, the only way to achieve this without using javascript is to use an image with the desired aspect ratio (there have been several other Stackoverflow posts about this issue), which is what I have done, so basically this:
div { height:20%; display:inline-block; }
div img { height:100%; }
This causes the div to scale the way I want, but the problem is that when the browser is resized, the width of the image changes, but the width of the div doesn't.. After refreshing the page, the element will be scaled properly again.
I've made a working example here: https://jsfiddle.net/r1efuzmb/ You can see the issue when you resize your browser or the "output" column on the Jsfiddle website.
Some notes:
The issue only occurs in Chrome and IE. In Firefox and Safari the div is scaling correctly.
I could use vh-units to set the width, but since I'm trying to scale this element relative to it's parent and not the viewport, it's not really ideal.
Does anyone know if this is a browser issue and/or if there's a way to work around this?
Thanks!
You can use padding-top on the before pseudo element to get the same effect as if you would have used an image.
div img {
height: auto;
width: 100%;
}
The image will fill the container with its proper aspect ratio.
I think that by using float and let the image-container always be 20vh could be a possible solution in your case.
html, body {
height:100%;
margin: 0;
}
.card-container {
height:20vh;
display:inline-block;
background-color:red;
position: fixed;
bottom: 0;
width: 100%;
background-color:lightgray;
}
.cards{
height: 20vh;
display: inline-block;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.cards:after{
content:"";
display:block;
clear:both;}
.cards img {
display: block;
float: left;
height:100%;
width:auto;
padding:0 2px;
}
<div class="card-container">
<div class="cards">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
</div>
</div>
I'm looking for a way to keep a modal dialog within screen bounds, i.e. that its height is always less than the screen height and the width is adjusted accordingly. I tried:
.modal-dialog {
max-height: 100%;
}
but this doesn't seem to have any effect.
http://jsfiddle.net/ma4zn5gv/
An illustration:
I prefer a pure CSS solution (no js) if it exists. For clarity, I'm looking for max-height, not height (i.e. is the modal is no taller than screen, leave it as is).
Use viewport units with calc. Like this:
.img-responsive {
max-height: calc(100vh - 225px);
}
...where the 225px corresponds to the combined height of the top and bottom sections of the viewport which surround the dialog.
Also, in order to take care of the width of the modal we need to set a few more properties:
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Updated Fiddle (Resize the viewport height to see the effect)
Alternatively:
We can replace calc with a padding + negative margin technique like so:
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
FIDDLE
PS: browser support for viewport units is very good
Target the modal-body and not the modal-dialog.
Add the following to your CSS:
max-height: 80vh;
overflow-y: auto;
It should look like this:
.modal-body {
max-height: 80vh; overflow-y: auto;
}
Adjust the VH height to preference.
Script
$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});
Fiddle
Since the default value set to auto and 100% in width and height. you just be able to modify; the image inside the viewport and the target ID, as follows:
/*let target has the same value as modal-dialog*/
#myModal {
width:auto;
height:auto;
margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
width:70%;
height:70%;
margin:0 auto;
}
Here's the DEMO in jsfiddle.
You also can separate it into, as follows:
.modal-dialog img {
width:100%;
height:100%;
margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
width:60%;
height:60%;
margin:0 auto;
}
UPDATED DEMO:
If you ensure that the parent elements have a height set, then you should be able to do it pretty easily. I have given the header and footer 10 percent heights hear and the body 80 percent so that it all adds up to 100 :)
.modal, .modal-dialog, .modal-content{
height: 100%;
}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
max-height:100%;
}
Fix the container size first, then set modal-dialog size.
For example:
.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}
Fiddle
If you provide max-height and max-width to 100% then it will take automatically accordingly screen but as you want this dialog size smaller then you will have to set max-height and max-width to some fix value.
As you have already used responsive model dialog so it will change dialog size automatically as per your screen size.
Try following css it may work as per your requirement. you can change max-height and max-width accordingly, margin-left and margin-right used for center align.
.modal-dialog {
max-height: 225px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
Hope it may help you.!!
Try working Fiddle with some css changes.
css:
.modal-dialog {
height: 100%;
margin: 0;
padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I think you should use overflow: hidden on .modal-dialog, with a style to mantain the image proportion.
html:
<div id="main">
<div id="foo">foo</div>
</div>
css:
html,body{
height: 100%;
}
#main{
height: 100%;
}
#foo{
height: auto;
/* height: 100%; I cannot use height 100% or fixed height for this element*/
}
#foo:before{
content: "bar";
/*I want to use the height in percentage which won't work but work with px*/
height: 100%;
display: block;/* or inline-block*/
}
demo
I cannot use flexbox css for some reason. And I also tried with transform css technique and various techniques such as table but even couldn't get vertical center.
I cannot change the markup and please if possible without touching the css for #main would be great for me.
You can center an element vertically within it's container using this technique:
#foo{
position: absolute;
top: 50%; // move down 50% of parent
transform: translateY(-50%); // move back up 50% of own height
}
Set position: relative; on the #main container to make #foo relate to it.
Demo
Try this:
#foo {
height: auto;
margin:auto;
position:absolute;
top:50%;
}
I made a button inside the div body and i want to show it on the right side of my div but when i zoom the page it get outside from the div body need help?
<style>
.mydiv
{
max-width:65%;
min-height:30px;
margin-left:20%;
margin-right:16%;
}
.a
{
max-width:100px;
height:20px;
position:relative;
margin-left:220px;
}
</style>
<html>
<div class="mydiv">
<button class="a">example</button>
</div>
</html>
I think this is happening because (for your div)
max-width:65%;
in the css...if you zoom in enough the button (which has max-width of 100px) is now exceeding the width of your div. Try setting your div to a number of pixels larger than 100px. If you want the button on the right side of the div, try setting the width to a number such as 300px.
max-width:300px;
then try zooming in. Also note IE6 and earlier do not support max-width.
You don't show us much context, but it may work positioning the button to the right using position:absolute;right:0;. (Note you'll need position:relative; on the container to keep it inside the container element)
.mydiv {
position: relative;
max-width: 65%;
min-height: 30px;
margin-left: 20%;
margin-right: 16%;
background: tan;
}
.a {
position: absolute;
right: 0;
max-width: 100px;
height: 20px;
}
So I have three div's
One parent and two child.
The parent is as follows:
#parent {
overflow:auto;
margin: 0 auto;
margin-top:37px;
min-height: 100%;
width:875px;
}
the two child divs are as follows
#child1 {
overflow:auto;
min-height:150px;
border-bottom:1px solid #bbb;
background-color:#eee;
opacity:0.4;
}
#child2 {
height:100%;
background-color:white;
}
The parent div extends 100% as I can see the borders of it till the end of the page but the child2 is not extending down to the end of the page like the parent div.
height doesn't behave the way you seem to be anticipating. When you specify height: 100% that percentage is calculated by looking up the DOM for the first parent of said element with a height specified that has absolute or relative positioning.
You can cheat when it comes to the body tag, so if you had something like this:
<body>
<div style="height: 100%">
</div>
</body>
Some browsers/versions will behave the way you expect by taking up the total height of the page. But it won't work when you go any deeper than that.
Here is the approach I use to strech a div to the bottom of the page, it involves absolute positioning (nice thing about this one is that it is pretty cross-browser compliant and doesn't require javascript to pull it off):
<div id="parent">
<div id="childNorm"></div>
<div id="childStrech"></div>
</div>
#parent
{
position: absolute;
width: 1000px;
bottom: 0;
top: 0;
margin: auto;
background-color: black;
}
#childNorm
{
position: absolute;
width: 1000px;
top: 0;
height: 50px;
background-color: blue;
color: white;
}
#childStrech
{
position: absolute;
width: 1000px;
top: 50px;
bottom: 0;
background-color: red;
color: white;
}
Here is a Jsfiddle for demo: http://jsfiddle.net/t7ZpX/
The trick:
When you specify absolute positioning and then put in bottom: 0; that causes the element to stretch to the bottom of the page; You just have to worry about positioning the elements as a trade off.
Yes, this is one of the annoying things in css. min-height is not considered a "height" for purposes of calculating height. See http://jsfiddle.net/3raLu/3/. You need to have height: 100% on the parent div to make the child full height. Or, if you can have it be absolutely positioned, then this works: http://jsfiddle.net/3raLu/6/.