What's a simple way to do this in CSS?
selector {
width: 75%;
height: width;
}
I've tried set the height to various properties, but they don't seem to accomplish what I want. How can I set one value to the value of another?
Padding-top percentages are based on width, so it's easy to calculate using pure CSS.
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 100%;
/* 1:1 ratio, set from padding top being 100% */
/* If you wanted one half as high, use 50% */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: red;
/* let's see it! */
color: white;
}
<div class="wrapper">
<div class="main">
This is a sample 1:1 responsive DIV.
</div>
</div>
You can't currently in css except in firefox with CSS variables
http://caniuse.com/#feat=css-variables
You can use a dynamic stylesheet language like less or sass to write css with variables. You can then compile the code into plain css.
Example in less:
#size: 75%;
selector {
width: #size;
height: #size;
}
Well, if you know width = 75%, you could just say height = 75%.
selector {
width: 75%;
height: 75%;
}
Now if you change width using PHP/Javascript, just change height, too. This appears to be the simplest way to me, but I'm still pretty new to making websites.
This is also answered here: stackoverflow.com/q/5445491/1004522
The easiest way i see is to use jquery in a way such as this:
<html>
<head>
<script>
selector{
width: 75%;
}
</scipt>
</head>
<body>
<script type="text/javascript" src="/jquery.js"></script>
<selector></selector>
<script type="text/javascript">
$("selector").css("height", $("selector").width());
</script>
</body>
</html>
To my understanding, this should make both width and height 75%.
Related
I've been stuck on this for awhile now. I have an answers-container div that's going to contain 4 rows, each with a checkbox and a button like this.
The problem is, I can't figure out how to get the width of the checkbox to be the same as the height, since if I set answers-container to be a grid and do grid-template-rows: 25% 25% 25% 25% the height of each answer will be correct but there's no way to set the width to be the same as the height. I know it's possible to do this in Jquery by manually grabbing the value of the height, but if possible I would like to find a solution in CSS.
I saw an answer that used a dummy div with padding set to a percentage which inherits that percentage from the parent, but I couldn't figure out a way to get that method to work while still keeping the button divs next to the checkboxes.
I don't have much code to share because I've deleted and rewritten this so many times, but this is the codepen:
https://codepen.io/TheNomadicAspie/pen/QWvWOgz
And this is what I'm trying to do:
.answers-container {
grid-columns: 2/3;
position: relative;
background-color: blue;
height: 100%;
}
.answer {
}
.checkbox {
}
.button {
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: red;
position: relative;
width: 50%;
padding-top: 50%;
/* 1:1 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
1:1 Aspect ratio<br/> width and height are always equeal
</div>
</div>
</body>
</html>
This question already has answers here:
Setting Element Width Based on Height Via CSS
(10 answers)
Closed 3 years ago.
I saw solution for height depending on width: css height same as width. Or here: https://stackoverflow.com/a/6615994/2256981.
But my question is opposite.
My element:
<body>
<div id="square"></div>
</body>
Style for it:
body, html {
margin: 0;
height: 100%;
min-height: 300px;
position: relative;
}
div#square { /* My square. */
height: 75%; /* It's height depends on ancestor's height. */
width: 75vh; /* If supported, preliminarily sets it's width. */
position: absolute; /* Centers it. */
left: 50%; top: 50%; transform: translate(-50%, -50%);
background-color: darkorange; /* Makes it visible. */
}
Script, that keeps it square:
window.onload = window.onresize = function (event) {
var mySquare = document.getElementById("square");
mySquare.style.width = mySquare.offsetHeight + 'px';
};
Complete code here: http://jsfiddle.net/je1h/hxkgfr9g/
The question is to make the same thing in pure CSS. No scripting.
There are two techiques I am aware of to keep the aspect ratio of an element according to it's height :
When height is relative to the viewport :
You can use vh units :
div {
width: 75vh;
height: 75vh;
background:darkorange;
}
<div></div>
For a height based on the height of a parent element :
You can use a dummy image that has the aspect ratio you want. Example with a 1:1 aspect ratio you can use a 1*1 transparent .png image or as commented by #vlgalik a 1*1 base64 encoded gif :
html,body{
height:100%;
margin:0;
padding:0;
}
#wrap{
height:75%;
}
#el{
display:inline-block;
height:100%;
background:darkorange;
}
#el img{
display:block;
height:100%;
width:auto;
}
<div id="wrap">
<div id="el">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
</div>
Note that this last demo doesn't update on window resize. But the aspect ratio is kept on page load
UPDATE :
As reported in the comments setting display:inline-flex: on #el seems to solve the updating on window resize problem.
Edit: Missed that you wanted to set the width depending of the height, this does the opposite :(
To support all ratios you can use padding-bottom. Percentages in padding-bottom are always relative to the width of the element:
/* the wrapper has a width */
.wrapper {
position: relative;
width: 25%;
margin-bottom: 10px;
}
/* these elements set the height (using padding-bottom) */
.square {
padding-bottom: 100%;
position: relative;
}
.widescreen {
padding-bottom: 56.25%; /* 9/16 = 0.5625 */
}
/*
* This is the content.
* Needs position:absolute to not add to the width of the parent
*/
.content {
/* fill parent */
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
/* visual */
padding: 10px;
background: orange;
color: white;
}
<div class="wrapper">
<div class="square">
<div class="content">square</div>
</div>
</div>
<div class="wrapper">
<div class="widescreen">
<div class="content">16:9 ratio</div>
</div>
</div>
The only downside is, that you need a bunch of wrapper elements.
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?
HTML:
<div id="container">
<div id="coveriframe"></div>
<div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>
Try in IE8:
http://jsfiddle.net/pkbz4/19/
The above code works in ALL other Major browsers. WTF Microsoft?
Stylesheet:
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
I've done this several times in IE8. The solution that works for me is to assign a background color to the div and then set opacity to 0. IE8 then recognizes the div as "existing" above the rest of the content. I also find setting position: absolute and all four directions to 0 is more reliable than 100% width and height. Like this:
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
Here's my update to your jsfiddle: http://jsfiddle.net/pkbz4/21/
CSS Specification says:
The percentage is calculated with respect to the height of the
generated box's containing block. If the height of the containing
block is not specified explicitly (i.e., it depends on content
height), and this element is not absolutely positioned, the value
computes to 'auto'.
Basically, In older versions of IE (including IE8) percentage heights are based on the height of the parent element. If the parent element doesn't have an explicit height, the percentage is ignored and set to Auto (in this case, 0px).
So, to fix this, you'll either want to explicitly set the height/width of #coveriframe or its parent. One thing you could try is setting the height of html and body to 100% (I'm assuming those are the parent elements).
html, body { height:100%; }
#container {
width: 100%;
height: 100%;
position: relative;
}
#navi,
#coveriframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#coveriframe {
z-index: 10;
}
why did you want to do in javascript and it works well in all browsers, I'll let my example I hope you work:
-----------------DIV-----------------
<div id="div1" style="display: block;">
<div class="mainbody">
<br />
</div></div>
-----------------JavaScript----------------
function showHideDiv(divX) {
if (divX == "1") {
document.getElementById("div1").style.visibility = "visible";
document.getElementById("div2").style.visibility = "hidden";
}
-----------------button HTML----------------
<li>click_Aqui</li>
The problem is that internet explorer up to ie9 doesn't recognize the mouse hover when hovered over a transparent background. Zach Shipley answer offers a good solutions.
But in case you want to add a border or an element to the transparent div or text the easiest way of doing this is by adding a 1px transparent png as background.
#coveriframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3007;
background-image: url("pixel-transparent.png");
}
Make sure that you are putting fixed height & width to that DIV.
As Shaquin Trifonoff mentioned above sometimes 100% or any length in % may not work onIE8. Always I am trying to avoid % in such situation.
Code snippet :-
html,body{ //This makes your page expandable as per screen resolution
height:100%;
}
#your-hide-div{
height:100px;
width: 100px;
display:block;
}
Given any arbitrary image, I want to crop a square from the center of the image and display it within a given square.
This question is similar to this: CSS Display an Image Resized and Cropped, but I don't know the size of the image so I can't use set margins.
One solution is to use a background image centered within an element sized to the cropped dimensions.
Basic example
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
}
<div class="center-cropped"
style="background-image: url('https://via.placeholder.com/200');">
</div>
Example with img tag
This version retains the img tag so that we do not lose the ability to drag or right-click to save the image. Credit to Parker Bennett for the opacity trick.
.center-cropped {
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
/* Set the image to fill its parent and make transparent */
.center-cropped img {
min-height: 100%;
min-width: 100%;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
/* modern browsers */
opacity: 0;
}
<div class="center-cropped"
style="background-image: url('https://via.placeholder.com/200');">
<img src="https://via.placeholder.com/200" />
</div>
object-fit/-position
See supported browsers.
The CSS3 Images specification defines the object-fit and object-position properties which together allow for greater control over the scale and position of the image content of an img element. With these, it will be possible to achieve the desired effect:
.center-cropped {
object-fit: none; /* Do not scale the image */
object-position: center; /* Center the image within the element */
height: 100px;
width: 100px;
}
<img class="center-cropped" src="https://via.placeholder.com/200" />
I was looking for a pure CSS solution using img tags (not the background image way).
I found this brilliant way to achieve the goal on crop thumbnails with css:
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}
It is similar to #Nathan Redblur's answer but it allows for portrait images, too.
Works like a charm for me. The only thing you need to know about the image is whether it is portrait or landscape in order to set the .portrait class so I had to use a bit of Javascript for this part.
Try this: Set your image crop dimensions and use this line in your CSS:
object-fit: cover;
Example with img tag but without background-image
This solution retains the img tag so that we do not lose the ability to drag or right-click to save the image but without background-image just center and crop with css.
Maintain the aspect ratio fine except in very hight images. (check the link)
(view in action)
Markup
<div class="center-cropped">
<img src="http://placehold.it/200x150" alt="" />
</div>
CSS
div.center-cropped {
width: 100px;
height: 100px;
overflow:hidden;
}
div.center-cropped img {
height: 100%;
min-width: 100%;
left: 50%;
position: relative;
transform: translateX(-50%);
}
I created an angularjs directive using #Russ's and #Alex's answers
Could be interesting in 2014 and beyond :P
html
<div ng-app="croppy">
<cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>
js
angular.module('croppy', [])
.directive('croppedImage', function () {
return {
restrict: "E",
replace: true,
template: "<div class='center-cropped'></div>",
link: function(scope, element, attrs) {
var width = attrs.width;
var height = attrs.height;
element.css('width', width + "px");
element.css('height', height + "px");
element.css('backgroundPosition', 'center center');
element.css('backgroundRepeat', 'no-repeat');
element.css('backgroundImage', "url('" + attrs.src + "')");
}
}
});
fiddle link
Try this:
#yourElementId
{
background: url(yourImageLocation.jpg) no-repeat center center;
width: 100px;
height: 100px;
}
Keep in mind that width and height will only work if your DOM element has layout (a block displayed element, like a div or an img). If it is not (a span, for example), add display: block; to the CSS rules. If you do not have access to the CSS files, drop the styles inline in the element.
There is another way you can crop image centered:
.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}
The only thing you will need is to add class "vertical" to vertical images, you can do it with this code:
jQuery(function($) {
$('img').one('load', function () {
var $img = $(this);
var tempImage1 = new Image();
tempImage1.src = $img.attr('src');
tempImage1.onload = function() {
var ratio = tempImage1.width / tempImage1.height;
if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
}
}).each(function () {
if (this.complete) $(this).load();
});
});
Note: "!important" is used to override possible width, height attributes on img tag.
for something like instagram explore or grid use this on img tag
aspect-ratio: 1 / 1; //or whatever
object-fit: cover;
note that parent has to have display of grid