Scale the contents of a div by a percentage?
You can simply use the zoom property:
#myContainer{
zoom: 0.5;
-moz-transform: scale(0.5);
}
Where myContainer contains all the elements you're editing. This is supported in all major browsers.
Keeping/scaling DIV Ratio with percentages
Just a quick idea which might be useful for you.
It is based on the fact that vertical padding/margin use the WIDTH of the parent box when it is set to percentages, so it is possible to resize a div relative its parent box
http://jsfiddle.net/xExuQ/2/
body,html { height:100%; }
.fixed-ratio-resize {
width: 50%; /* child width = parent width * percent */
padding-bottom: 50%; /* child height = parent width * percent */
height: 0; /* well, it is not perfect :) */
}
If you want to put some (non-background) content into this nicely resized box, then put an absolutely positioned div inside it.
Reference:
http://www.w3.org/TR/CSS2/box.html#margin-properties and
http://www.w3.org/TR/CSS2/box.html#padding-properties says:
Margins: "The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
Paddings:"The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
EDIT
http://jsfiddle.net/mszBF/6/
HTML:
<a class="griditem" href="#" style="background-image: url(http://pic.jpg);">
<span class="titles">
<span class="name">Unicomp Studios</span>
<span class="title">Springs Buckling (2012)</span>
</span>
</a>
CSS:
.griditem {
float: left;
margin-right: 17px;
margin-bottom: 17px;
min-width: 100px; /* extremely narrow blocks ==> crap looking */
width: 30%;
background: blue no-repeat;
background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}
.titles {
/* <a> elements must only have inline elements like img, span.
divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
display: block; /* so display those inline elements as blocks */
padding: 5px;
margin: 0 auto;
margin-top: 105%;
background: yellow;
}
.titles > span {
display: block;
}
trasform scale by a percentage of parent size in pure css
I found a trick to do that. Simply by creating a super-container. I set it up to 100% of the parent size (in my case, the content is floating out of scope so I can also use a positioning in absolute for a better result)
.v { background-color:red; width:100px; height:100px;}
.c { width:100%; height:100%; transform:scale(.5);}
<div class='c'><div class='v'> </div></div>
Really Simple Problem. I want to make a div scale relative to the size of my screen using percentage
The %
unit is relative to the parent element, not the viewport. If you'd like to set the dimensions of an element relative to the size of the viewport, you can use the vw
(viewport width) and vh
(viewport height) units. These work similar to percentage-based units (1vw
is 1% of the viewport width).
div {
width: 80vw;
height: 50vh;
background-color: grey;
}
Scale div with its content to fit window
let outer = document.getElementById('outer'),
wrapper = document.getElementById('wrap'),
maxWidth = outer.clientWidth,
maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();
function resize(){let scale,
width = window.innerWidth,
height = window.innerHeight,
isMax = width >= maxWidth && height >= maxHeight;
scale = Math.min(width/maxWidth, height/maxHeight);
outer.style.transform = isMax?'':'scale(' + scale + ')';
wrapper.style.width = isMax?'':maxWidth * scale;
wrapper.style.height = isMax?'':maxHeight * scale;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
background: #e6e9f0;
margin: 10px 0;
}
#wrap {
position: relative;
width: 640px;
height: 480px;
margin: 0 auto;
}
#outer {
position: relative;
width: 640px;
height: 280px;
background: url('https://source.unsplash.com/random') no-repeat center center;
transform-origin: 0% 50%;
border-radius: 10px;
box-shadow: 0px 3px 25px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
#outer:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
#profile {
background: url('https://source.unsplash.com/random/300x300') no-repeat center center;
position: absolute;
width: 60px;
height: 60px;
bottom: 0;
margin: 20px;
border-radius: 100px;
background-size: contain;
}
#content {
font-size: 20px;
position: absolute;
left: 0px;
bottom: 0;
margin: 30px 100px;
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
#content div:last-child {
font-size: 15px;
opacity: 0.7;
}
<div id="wrap">
<div id="outer">
<div id="profile"></div>
<div id="content">
<div>Monwell Partee</div>
<div>UX / UI Designer</div>
</div>
</div>
</div>
how to scale img by percentage of self and not percentage of its container
I ended up solving it like this (with javascript/jQuery):
-Create a div
-Insert the image
-pick up the dimension from the image
-set those dimensions to the DIV
-set image dimensions to 100%
That way the image till initially be of original size, my jQuery resize() on the DIV will work and the image will always fill the DIV.
Related Topics
Css3 Replacement for Jquery.Fadein and Fadeout
Z-Index Inherits Parents Z-Index , or Not
How to Make the Whole Card Component Clickable in Material UI Using React Js
After Content Update from Ajax Jquery Not Work Properly
Why Do Developers Append a Query String in JavaScript Files' Stylesheet Links
Is There a Way I Can Force Chrome to Do Subpixel Rendering for a Slow Translation
Scale the Contents of a Div by a Percentage
Align Select-Options Text to Right
Put Cursor at End of Text Input's Value
Facebook Oauth "Unsupported" in Chrome on iOS
Prevent Scroll Bounce for the Body Element, But Keep It for Child Elements in iOS
Uncaught Typeerror: Cannot Read Property 'Classname' of Undefined
How to Achieve a Consistent Layout in All Browsers
Position Sticky: Scrollable, When Longer Than Viewport
Absolute and Flexbox in React Native
Iframe CSS Override for New Twitter Widget
Content Disappears Immediately After Form Submitted and Function Runs