I put together a page that has a .floatbox, which sets the top and bottom margin based on the variable --currentViewportHeight (basically, I dynamically detect it with JS and insert it into my CSS, on page load and resize); --autoTopBottomMargin is set arbitrarily to 0.1 because this is how big I want the top and bottom margins to be. The following class allows me to have very nice, dynamic top and bottom margins.
.floatbox {
position: relative;
width: 500px;
left: 50%;
transform: translate(-50%);
margin-top: calc(var(--currentViewportHeight) * 1px * var(--autoTopBottomMargin));
margin-bottom: calc(var(--currentViewportHeight) * 1px * var(--autoTopBottomMargin));
padding-top: 20px;
}
Then, when the size of the viewport becomes less than the the size of .floatbox (with a little wiggle room—600px, to be precise), I go into the responsive spec. 0.00176 determines the perfect relative size and right-hand margin in one go.
#media only screen and (max-width: 600px) {
.floatbox {
position: absolute;
transform-origin: left top;
transform: scale(calc(var(--currentViewportWidth) * 0.00176));
top: calc(var(--currentViewportWidth) * 1px * var(--repositionFactor));
left: calc(var(--currentViewportWidth) * 1px * var(--repositionFactor));
margin-top: unset;
}
}
Here, I use --currentViewportWidth (also detected with JS and inserted dynamically into my CSS) to perfectly scale .floatbox, so it's sized exactly right and with the exactly right margins on any device.
Seemingly, everything is just fine...except, no matter what I do, I cannot set margin-bottom for the responsive spec, by using either static or dynamic values. On mobile, it just sticks to the bottom of the screen.
I figure that I must be missing something really obvious here...
Related
I am (was) looking for a way that my images would be full width despite the body padding. And, I wanted my images to also not be too tall.
Making matters more difficult, (a) all of the images live inside of <p> tags and I can't (easily) assign classes, etc to them. That is because the pages are generated from a Markdown conversion and I wanted to avoid having to apply a ton of regex (though I was willing to if need be).
The requirements were basically that the text be padded inside the body (but not via a p margin so I didn't have to deal with non-paragraph elements). And, I wanted it such that the maximum height was some percentage of the current width. Finally, in addition to trying to avoid touching the HTML, I also didn't want to add any js if I could help it.
The following is my solution. It still needs some tinkering since you can become height-constrained before width-constrained with square images but if nothing else it is a start. Again, this may be super obvious to those more experienced.
Define the folliwng
$pad to be the padding of the body (2em)
$body_width to be the width of the body element (900px
$mh is the fraction to set the max height. Again, this is personal preference for the type of images you care about. I'll do 0.9 in this example.
body {
margin: 1em auto auto;
max-width: 900px; /* $body_width */
padding: 0.1em 2em 2em; /* $pad $pad */
}
video,img{
border: 0;
max-width: calc(100% + 4em); /* + 2*$pad */
max-height: 810px; /* $mh * $body_width
display: block;
/* From [1] */
position: relative;
left: 50%;
transform: translateX(-50%);
display: block;
}
[reference 1]
But I also wanted to handle tall screens with width less than max (i.e. mobile).
#media only screen and (max-width : 900px) { /* $mh*$body_width */
img,video {
max-height: 100vw;
}
}
It works by first making the image max width go beyond the padding and then using transform to center it.
I hope this helps someone in the future. It could have saved me a day!
I have been reading many solutions to this and tried most of them, but unfortunately I cannot get it like I want it working for all browsers.
What I basically want is to automatically crop images (from the center) to a defined aspect ratio. This should apply to "portrait" images (cropping on top and bottom) and also to landscape pictures (cropping left and right). It has to be responsive so that the images will always have the desired with (and height using the aspect ratio).
It is described well here: Center Crop Images but as in that solution I do not know if the picture will be to wide or to high.
I also cannot and don't want to work with background images.
I could get it to work to crop on top and bottom but when the image is wider than the desired aspect ratio it will "crunch" the images to look distorted.
Here is one of the solutions that worked partly:
/* wrapper div */
.iw-so-article-thumb {
position: relative;
overflow: hidden;
/* text-align: center;*/
/* ensures the image is always in the h-middle */
border: 3px solid black;
}
/* create an aspect ratio of the wrapper */
.iw-so-article-thumb:before {
content: "";
display: block;
padding-top: 100%;
}
.iw-so-article-thumb img {
position: absolute;
top: -100%;
right: -100%;
bottom: -100%;
left: -100%;
margin: auto;
display: block;
min-width: 100%;
min-height: 100%;
object-fit: cover;
/* necessary to fill the frame/rescale the image */
}
This worked using "object-fit: cover" but not in IE/Edge as I found out (there pictures will be "crunched" when cropping should happen on the sides.
Like I said I tried many other solutions I found in forums/blogs but some didn't even work at all.
I suspect the cropping on the sides for wide images fails because the aspect ratio in the image wrapper is defined by the ratio of height to width, so the wrapper will take a responsive width and adapt the height (then crop by "overflow: hidden"). But when the image is wider than the aspect ratio it cannot handle this.
I am not sure if there is a pure CSS solution that works for all browsers including IE/Edge, I suspect there isn't, but I am happy to be taught otherwise.
I have been implementing some extra placements for bootstrap's popovers, and they are all working quite nicely. I am however having trouble with dynamic content in popovers.
The content is rendering fine and dandy, but if I use top positioning for the popover, and it's height changes (dynamically) according to it's content, the placement becomes wrong:
How can I fix the popovers so that when the height is adjusted, the anchor point stays the same?
Try this:
.popover{position:fixed;}
It has the top position by default please make it bottom and adjust the position according to it. Then the height will increase upward and it will not affect your design.
You'll want something like this:
FIDDLE
.bubble
{
position: absolute;
left: -100px; /* -half width of bubble + half width of button */
bottom: 100%;
margin-bottom: 15px; /* height of callout spike */
width: 250px;
min-height: 50px;
padding: 5px;
}
From the image in the question it seems that the rule
margin-bottom: 15px; /* height of callout spike */
is the one that is missing.
putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?
For most browsers, you can use position:fixed
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.
Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/
Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html
<style>
.CenterScreen{
position:fixed;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);}
/*reposition element center with screen center*/
z-index:10000;
/*actually, this number is the count of the elements of page plus 1 :)*/
/*if you need that holds the element top of the others. */
</style>
If you add this class your element, it will be always center of the screen.
For example:
Hello world
This might help you : http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/
Put the image in a div tag with some class name (centeredImage) and use the following css
div.centeredImage {
margin: 0px auto;
position: fixed;
top: 100px;//whatever you want to set top;
}
I have 5 stars on a line, and 2 kind of pictures empty and filled. I need to crop by css filled one, under empty, so that it looks like percent of fillness. But looks like I have problems with standart crop approach. Can you suggest ideas?
I’d use two nested containers and do it somehow like this:
#outer {
background: url('empty.png') top left repeat-x #666666;
position: relative;
height: 16px; /* set this to the height of the image */
width: 80px; /* set this to a multiple of the image’s width */
}
#inner {
background: url('filled.png') top left repeat-x #999900;
position: absolute;
top: 0;
left: 0;
height: 16px; /* same as above */
}
Set the width property on the inner container via inline CSS as needed:
style='width: 32px;'
style='width: 64px;'
(It doesn’t necessarily have to be a multiple of one image’s width.)
Bonus: If your images don’t use transparency, the fallback background colors of the CSS will make up for percentage bars if the images fail to load.