Container's DOM width after transform is the same as before transform?
Why?
var theScale = aNumber;
var containerWidth = theContainer.width();
alert(containerWidth);
// and the other prefixes, as well
theContainer.css("-webkit-transform", "scale(" + theScale + ")");
containerWidth = theContainer.width();
alert(containerWidth); // the same value ???
Transforms don't affect the layout — or more precisely the box model — of an element. They are purely cosmetic. From the spec:
Note: Transformations do affect the visual layout on the canvas, but have no affect on the CSS layout itself. This also means transforms do not affect results of the Element Interface Extensions getClientRects() and getBoundingClientRect(), which are specified in [CSSOM-VIEW].
I have solved the problem with ::before.
The tag has the right size and I scale the image in the ::before layer.
*, *::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
width: calc(1178px / 2);
height: calc(1280px / 2);
position: relative;
border: solid 5px blue;
}
.card::before {
content: "";
position: absolute;
border: solid 5px red;
width: calc(100%);
height: calc(100%);
background-image: url(./seasons-of-the-year.png);
transform: scale(0.5);
transform-origin: left top;
}
Related
I've looked into this a fair bit but can't seem to find a good, solid answer to find how to make a responsive circle around a div element of variable height.
It's easy to make a simple responsive circle using vw units.
<div style="height:20vw; width:20vw"></div>
However, I'm looking to use a min-height of an element and have a circle around this div.
Another way to create a responsive circle is using something like the snippet below, but again I can't adapt this to work for a variable height (again, I can't use vh units as the div will change in height.
.square {
position: relative;
width: 10%;
background: gray;
border-radius: 50%;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="square">
<div class="content">
</div>
</div>
I am trying to create something like the below, where the circle will never cut into the corners of the div (with around a 10px padding). I personally was trying to avoid javascript and would have preferred a css only approach, but it seems it's unavoidable. Maybe the only solution is to use a jquery to calculate the height of the element in order to apply this to a wrapper element?
I was playing around with this:
.square {
position: absolute;
top: 50%;
display: inline-block;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
<div class="square">
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
</div>
Clip-path can easily do this if you consider solid coloration.
Resize the element and the circle will follow:
.box {
width: 200px;
height: 200px;
overflow: hidden;
resize: both;
background: blue;
box-shadow: 0 0 0 200vmax red;
clip-path: circle(71%);
margin: 100px auto;
}
<div class="box"></div>
Related question to understand the magic number 71%: clip-path:circle() radius doesn't seem to be calculated correctly
To use an image we can consider pseudo elements. You can also rely on calc() to add the offset:
.box {
width: 200px;=
resize: both;
clip-path: circle(calc(71% + 10px));
margin: 100px auto;
position: relative;
font-size:35px;
color:#fff;
}
/* the background layer */
.box::before {
content:"";
position: absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
background:blue;
}
/* the image layer */
.box::after {
content:"";
position: fixed; /* to make sure the image cover all the screen */
z-index:-2;
top:0;
bottom:0;
left:0;
right:0;
background:url(https://picsum.photos/id/1015/1000/1000) center/cover no-repeat;
}
<div class="box" contenteditable="true"> Edit this<br>text </div>
I tried my hardest to figure this out with pure css. Though the problem with css I could not figure out how to calculate the diameter of the circle based on the content div size; the length from top left corner to bottom right corner of the variable height div.
I'm not sure if can be done using the calc() css function.
But I did manage to do it with a little jquery (which could easily be changed to pure javascript if you are not using jquery).
See working resizable example below (follow my comments in code)
Note: If you are using internet explorer the resizable demo content div will not resize.
// circumscriber for variable size divs
function circumscriber() {
// for each variable size div on page
$(".variable-size").each(function() {
// get the variable size div content width and height
let width = $(this).outerWidth();
let height = $(this).outerHeight();
// get the diameter for our pefect circle based on content size
let diameter = Math.sqrt(width ** 2 + height ** 2);
// extra 15 pixel circle edge around variable size div
let edge = 15;
// add current circle size width css
$('.circle', this).css({
'width': (diameter + (edge * 2)) + 'px'
})
});
}
// run the circumscriber (you might wana do this on ready)
circumscriber();
// if the window is resized responsively
$(window).on('resize', function() {
circumscriber();
});
// for demo purpose to fire circumscriber when resizing content
// not needed for real thing
$('.content').on('input', function() {
this.style.height = "";
this.style.height = ( this.scrollHeight - 30 ) + "px";
circumscriber();
}).on('mouseup', function() {
circumscriber();
});
/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size div in the window for demo purposes */
.variable-size {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* resizable text area for demo */
/* again not needed */
.variable-size .content {
padding: 15px;
background: #fff;
resize: both;
overflow: auto;
color: #000;
border: none;
width: 200px;
font-weight: bold;
}
.variable-size .content:focus {
outline: 0;
}
/* child circle div css */
.variable-size .circle {
position: absolute;
background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
background-position: center center;
z-index: -1;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
width: 0;
}
/* fast way to make circle height the same as current width */
.variable-size .circle:before {
display: block;
content: '';
width: 100%;
padding-top: 100%;
}
/* demo window css */
HTML,
BODY {
height: 100%;
min-height: 100%;
background: black;
position: relative;
font-family: "Lucida Console", Courier, monospace;
}
<div class="variable-size">
<textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME ↘"></textarea>
<div class="circle"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
See jsfiddle here... https://jsfiddle.net/joshmoto/6d0zs7uq/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Source: https://www.w3schools.com/
You could use flex display and insert empty flex-items around the inner div and use flex-basis to fix their width.
Try this
.square {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-height: 100px;
border-radius: 50%;
background: black;
background-size: 100% 100%;
padding: 20px;
}
.content {
width: 300px;
min-height: 100px;
background: tomato;
}
.emptyDiv {
flex-basis: 120px
}
<div class="square">
<div class="emptyDiv"></div>
<div class="content">
Hello!<br>
<br><br><br>This has a variable height but fixed width<br><br><br>Hello
</div>
<div class="emptyDiv"></div>
</div>
some times in wrapped by width div needs to set for an element background to full width, so I set it in an pseudo element, but descktop browser, when page is long height adds 16px for vertical scrooll bar to viewport, so I calculate it
by calc (see below).
Here is Example
HTML:
<div class="wrapped">
<h1>100vw background in wrapped</h1>
<div class="fullbg">
some body text, images, etc here
</div>
</div>
CSS
html, body { margin: 0; padding: 0; }
body { height: 100%; width: 100%; }
div { position: relative; }
*,*:before,*:after { box-sizing: border-box;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.wrapped {
width: 70%;
margin: 0 auto;
height: 150vh; /* simulate long heigh */
}
.fullbg {
height: 5em;
/* some styles here*/
}
.fullbg:before {
content: "";
bottom: 0;
display: block;
background: rgba(85, 144, 169, 0.7);
position: absolute;
width: 100vw;
right: 50%;
margin-right: -50vw; /* work for short page or mobile browser*/
margin-right: calc( -50vw + 8px ); /* work for desctop long page */
top: 0;
z-index: -1;
}
I looked answer at
Prevent 100vw from creating horizontal scroll
Difference between Width:100% and width:100vw?
and others questions,
but do not find real true universal css solution for this
as a temporary solution may be an js, like this:
var scrollbarWidth = ($(document).width() - window.innerWidth);
but I think it not the best solution, and now I not figured out how to use it with a pseudo considering that to scroll width can vary.
ps. no one overflow: hidden!
The scrollbar can be targeted specifically.
Check this out for the fix in chrome and safari
http://codepen.io/anon/pen/dXgmbZ
Key CSS:
.element::-webkit-scrollbar {
width: 0 !important;
}`
The codepen is just your example with the chrome fix. If you'd like to see a more robust solution, check out this JSFiddle:
http://jsfiddle.net/E78q3/
The idea behind this is just clipping out the scroll bar with absolute positioning and hiding container/wrapper overflow. Simple, clever, yet effective.
Further Reading:
https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
The code below is attached to window.onresize = resize;. The baseWidth and baseHeight are read on load as a basis for the calculations. The main variable is defined just by setting it to the main html node. The font is set on a block element to cause all of the em based elements within it to resize in kind. When the width or height of the browser is changed then the ratio is recalculated. Please see demo to understand what I achieve with JS but would like to find a pure CSS solution: http://codepen.io/anon/pen/nLauF
I have been exploring options in CSS3 such as calc. Feel free to also suggest any improvements to the JS below also.
function resize() {
var height = 0,
width = 0;
if(window.innerWidth <= window.innerHeight) {
size = window.innerWidth / baseWidth;
height = baseHeight * size;
width = window.innerWidth;
} else {
size = window.innerHeight / baseHeight;
height = window.innerHeight;
width = baseWidth * size;
}
if(baseWidth * size > window.innerWidth) {
size = window.innerWidth / baseWidth;
height = baseHeight * size;
width = window.innerWidth;
}
main.style.height = height + "px";
main.style.width = width + "px";
main.style.fontSize = size * 16 + "px";
}
Thanks!
I wrote this code including font-size calculation with vmin units :
DEMO
CSS :
main {
width: 80vmin;
height: 60vmin;
background-color: #000;
position: absolute;
top:0; bottom:0;
left:0; right:0;
margin:auto;
}
h1 {
color: #fff;
font-size: 30px; /* general fallback */
font-size: 5vm; /* IE9 fallback */
font-size: 5vmin;
}
For browser support, you can check canIuse
I adapted a piece of CSS i wrote for a different project to solve your problem: JSFiddle DEMO
I achieved the aspect ration of 4-3 by using a .75 multiplier (i.e. the width of main is 50% and the height should be 75% of that so the padding-top is 37.5%). You can see how these are adjustable to lock in your ratio.
.main {
width: 50% !important;
height: 0;
display: block;
overflow: hidden;
line-height: 0;
position: relative;
padding: 37.5% 0 0 0;
background-color: #000;
margin: 0 auto;
}
.main-inner {
position: absolute;
display: block;
margin: auto;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
}
.main-inner-relative {
position: relative;
padding: 10px;
}
p {
color: white;
padding: 0;
margin: 0;
}
This would require you to modify your HTML like so:
<div class="main">
<div class="main-inner">
<div class="main-inner-relative">
<p>hello</p>
</div>
</div>
</div>
reference 1 -- this reference is my original solution used to keep images locked into an aspect ratio responsively
reference 2
I'd like to make a circular button (div works too) and put it in the centre with a diameter of 20% of the height of the window. This I can do, but the button will become oval if the window isn't exactly square (I'd like the width and height to be the same - a perfect circle).
.circle {
height: 20%;
width: 20%;
border-radius: 100%;
font-size: 20px;
color: #fff;
line-height: 100px;
text-align: center;
background: #000
}
Hardcoding a pixel value isn't much of an option as it wouldn't resize based on the window. Any ideas?
There are two ways to achive this; with and without JavaScript.
The JavaScript method
Here's a simple demo: little link.
HTML:
<div class = "circle"></div>
CSS:
html, body {
height: 100%;
}
.circle {
border-radius: 1000px;
background-color: rgb(0, 162, 232);
}
JavaScript (uses jQuery, but it isn't necessary):
function upd() {
var h = $("body").height();
$(".circle").height(h / 5);
$(".circle").width(h / 5);
}
upd();
window.onresize = upd;
The non-JavaScript (CSS) method
For a CSS-only solution, you need to use the fact that all padding values are calculated relative to the element parent's width, not height (reference). Little demo: little link.
HTML:
<div class = "wrapper">
<div class = "main">
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
}
.wrapper {
width: 20%;
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 100%; /*1:1 ratio*/
display: block;
content: '';
}
.main {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
border-radius: 1000px;
background-color: rgb(0, 162, 232);
/*I wanted it to look good :)*/
font-family: 'Arial', Helvetica, Sans-Serif;
color: white;
}
There is a way to achieve a perfect circle without using any JS, it lies in the specifications definition for padding percentage. When the padding is applied as a percentage it is applied as a percentage of the objects width, which means if you set width and height to 0, and give the object a padding of 20% you'll end up with a circle occupying 20% of the available width. You'll need to get creative to get things inside the circle though.
<style>
html, body {
width:80%;
}
.square
{
width:0%;
height:0%;
padding:20%;
position:relative;
left:25%;/*Position central*/
border-radius:100%;
margin:auto;/*Position central*/
border:1px solid #000000;
}
</style>
The easiest fix is to add min-height and min-width property to that circle with same value.
.circle {
min-width: 100px;
min-height: 100px;
}
I have a background image and want to add a transparent fill color on top of that. I use modern browsers like Firefox and Google Chrome.
This code works (but does not solve the problem)
background: url('bkg.jpg'), rgba(0,0,0, .5);
This code don't work (but should solve my problem)
background: rgba(0,0,0, .5), url('bkg.jpg');
Why? Solution?
https://developer.mozilla.org/en/CSS/background says:
Note: The background-color can only be defined on the last background,
as there is only one background color for the whole element.
http://www.w3.org/TR/css3-background/#layering says:
The background color, if present, is painted below all of the other
layers.
http://www.w3.org/TR/css3-background/#background-color says:
This property sets the background color of an element. The color is
drawn behind any background images.
Maybe you could use the :before/:after pseudoelements instead with absolute positioning.
http://jsfiddle.net/3mNkZ/3/
div {
background: rgba(0,255,0, .5);
width: 200px; height: 200px;
border: 10px solid red;
position: relative;
font-size: 100px;
color: white;
}
div:before {
background: url('http://placekitten.com/200/150');
content: ' ';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
You have to make a div that is the same size as the window to get the effect.
Here is a jsfiddle and the code below.
html{
background: url('http://tribulant.net/lightbox/files/2010/08/image-2.jpg');
}
.color {
background-color: rgb(100,0,0);
opacity: 0.5;
height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
}