I'm making a album page with HTML and CSS and I want to set my height of the image to be 9/16 of the width.
HTML code
<div class = "col-md-12" id = "album-list">
<div class = "col-md-4">
<div id = "album-card" style = "border: 1px solid grey;">
<img class = "image_thumbnail" src = "images/sampleImage.jpg" alt = "Thumbnail" />
<div style = "padding-top: 10px; padding-bottom: 5px;">
<p class = "card-text"><strong>TITLE HERE</strong></p>
</div>
</div>
</div>
<!-- More Columns -->
</div>
CSS style
.image_thumbnail {
width: 100%;
}
I saw some posts on stackoverflow with similar questions, and the answer was to use padding-bottom to set the height according to the width. However, since I gave border around #album-card, #album-card gets longer in height than it's supposed to be.
How can I set the heigth 9/16 of the width??
To convert the images:
var images = document.querySelectorAll('.image_thumbnail');
for (var i = 0; i < images.length; i++) {
images[i].height = images[i].width * 0.5625;
}
This will select all the images on the page with the according class and will directly convert the height relative to their width (as: 16 / 9 = 0.5625).
With the help calc() in css3 you can calculate width.
.image_thumbnail {
width: calc((100%*9)/16);
}
This is Referance calc(), This may be helpful for you.
Related
How would I add space between 2 images using html and css? This question was answered in another stackoverflow thread, but I wasn't able to apply that solution to mine because I couldn't understand it.
The main problem might be in the css, because I know that margin is outer space and padding is inner space, so I thought using those I might be able to create space using margin and padding, but I am not using them properly, I think.
Here's what I have:
HTML
<p> This paragraph is just where I put lots of unnecessary info about a tree and a house. </p>
<div id = "images">
<img src = "tree.png" alt = "Tree picture" width = "100" height = "100">
<img src = "house.png" alt = "House picture" width = "100" height = "100">
</div>
CSS
#images {
margin:50px;
padding:50px;
}
You need to target the actual images themselves to put spacing around them instead of the div that is outside of them.
#images img {
margin: 25px;
}
<p>This paragraph is just where I put lots of unnecessary info about a tree and a house.</p>
<div id="images">
<img src="tree.png" alt="Tree picture" width="100" height="100">
<img src="house.png" alt="House picture" width="100" height="100">
</div>
It can be done this way. Although, it is probably better to provide an identifier like ID and then set the css to the id.
img
{
padding:25px;
}
<p> This paragraph is just where I put lots of unnecessary info about a tree and a house. </p>
<div id = "images">
<img src = "tree.png" alt = "Tree picture" width = "100" height = "100" >
<img src = "house.png" alt = "House picture" width = "100" height = "100">
</div>
You just have to add this to your CSS, your code wasn't working because you were applying the CSS to the div and not the individual elements. An effective way would be to add a class(example, class="ex-image") to the img elements and then using that selector to apply changes.
img{
margin: 25px;
}
How can I make it so that the mouth, eyes, and eyebrows appear on top of the face without changing the html? (The mouth is in the wrong position so I can see it)
<body>
<div id = "shoulders">
<div id = "face">
<div class = "eyebrow" id = "lefteyebrow"> </div>
<div class = "eyebrow" id = "righteyebrow"> </div>
<div class = "eye" id = "lefteye"> </div>
<div class = "eye" id = "righteye"> </div>
<div id = "mouth"></div>
</div>
</div>
</body>
https://jsfiddle.net/tvkhb8zt/
You have several ways to achieve what you want.
As mentioned before you can use z-index. Just remember that if you have complicated structure of a page it is not recommended to use z-index.
Easier approach may be to use simple relative/absolute positioning. Here is a good article of explaining CSS positioning. This is JSfiddle example of your image with positioned mouth and head on top of shoulders.
try css property: z-index
<div class = "eyebrow" id = "lefteyebrow" style="z-index:0"> </div>
<div class = "eyebrow" id = "righteyebrow" style="z-index:1"> </div>
You can add z-index to the CSS. Please note z-index only works on explicity positioned elements, so just add a position: relative as well. Largest z-index will be on top.
So for example:
#face, .eyebrow, .eye {
position: relative;
}
#face {
z-index: 1;
}
.eyebrow {
z-index: 2;
}
.eye {
z-index: 2;
}
I've got this image here, Just a simple bootstrap website.
Heres the code for it. I've tired 100% height as you can see but its not working ,I'm wanting the black background to be full height of the screen.
<div class="col-md-8" style="background-color:#333333; height:100%">
<p style="color:white; padding-top:10%; font-size:80px" align="right">Some</p>
</div>
<div class="col-md-4" style="background-color:#ffffff;">
<p style="color:#333; padding-top:20%; font-size:80px">Text</p>
</div>
In order for percentage heights to work, there needs to be a height set on the parent element. If the height of the parent is a percentage, then it will require it's parent to have a height set on it also. This is the reason why simply applying html, body { height: 100%; } might/is not working - your element might not be a child of the <body> and therefore breaking the chain.
For example, does not work, chain is broken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="no-height-set">
<div class="no-height-set">
<div class="percentage-height-set"></div>
</div>
</div>
</body>
</html>
Works, chain is unbroken:
<html class="percentage-height-set">
<body class="percentage-height-set">
<div class="percentage-height-set"></div>
</body>
</html>
Since percentage heights require a height to be set on their parent element the math might look like this:
[parent height] * [percentage height of child] = [pixel height of child]
And what you're doing:
?? * .05 = ??
With a set height on parent:
500px * .05 = 25px
In css:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
Make sure, that your div isn't a child of another div
I'm having a following template:
<div class='content'>
{{content}}
</div>
And following style:
.content {
margin-top: 30px;
background-color: skyblue;
width: 300px;
transition: all linear 0.5s;
}
Please note that {{content}} will grow or shrink (technically to extend a card to show more information or hide it). I've already set the css transition and it does work when manually setting a different height to the element. However when more content is injected into content no transition is made, just a plain old resizing. Any help of getting the transision right?
See following plunkr
Thanks,
Amit.
I believe that's quite normal, transitions apply only to changes to the CSS, not for computed changes.
One option might be to have a nested div, set overflow: hidden on the outer one, then get the computed height of the inner one and set it on the outer one to get the transition.
CSS:
#outer {
margin-top: 30px;
background-color: skyblue;
width: 300px;
transition: all linear 0.5s;
overflow: hidden;
}
HTML:
<button id="more" onclick="increase();">More</button>
<button id="more" onclick="decrease();">Less</button>
<div id="outer">
<div id="inner">
lorem ipsum
</div>
</div>
JS:
function increase()
{
var o = document.getElementById('inner');
var t = o.innerHTML;
for (var i=0 ; i<20;i++)
t += " lorem ipsum";
o.innerHTML = t;
adjustHeight();
}
function decrease()
{
var o = document.getElementById('inner');
o.innerHTML = "lorem ipsum";
adjustHeight();
}
function adjustHeight()
{
var i = document.getElementById('inner');
var o = document.getElementById('outer');
o.style.height = window.getComputedStyle(i).height;
}
Working fiddle: http://jsfiddle.net/Lnts7w1f/
With the help of #jcaron answer I managed to sort this in a react component. So when the 'activeSubsection' button is clicked the useEffect hook is run.
const [topicsHeight, setTopicsHeight] = React.useState("0px")
const topicsDiv = React.useRef();
React.useEffect(() => {
setTopicsHeight(topicsDiv?.current?.offsetHeight + "px")
}, [activeSubsection])
{!hideTopics &&
<div style={{ overflow: "hidden", height: topicsHeight, transition: "0.2s" }}>
<Topics ref={topicsDiv} className="largeScreen">
{!!subsectionTopics && subsectionTopics.sort((a, b) => a.node.slug.localeCompare(b.node.slug)).map((topic, index) =>
<Link key={index} href={'/'+slug+'/'+topic.node.slug} scroll={false}>
<Topic
active={activeTopic == topic.node.slug} transition={true} bold={activeTopic == topic.node.slug}
>
{topic.node.title}
</Topic>
</Link>
)}
</Topics>
</div>
}
Ovbiously that's not the full component but hopefully enough to give you an idea.
Well... There's a trick you can do for that... I don't know if it will fit your needs.
The css transition effect is applied on css properties that have a previous value, and then change. Though you are indeed changing the content's height of the div, the actual css property height is not explicitly changing. That's why you don't get the animation.
A workaround is to find the inner height of the div and then set it to the element, causing it to animate. I've created a function for that, and added a span to control the inner size of the div.
Just call the function on every change:
<div class='content'>
<span id="height-control">
{{ctrl.content}}
</span>
</div>
JS function:
var spn = document.getElementById("height-control");
var UpdateHeight = function () {
var h = spn.offsetHeight;
spn.parentNode.style.height = h + "px";
};
http://plnkr.co/edit/p6QRAR5j4C8d0d0XRJRp?p=preview
I have a set of code as per below. The point is to have a set of images be in the div, and the remainder of the div is populated with a textarea. If I set the height = 100%, it will make it the same height, which isn't the (div.height - images.height) and makes the textarea longer.
It says on w3c that inherit doesn't work at the moment, auto will just make a default textarea, and hardcoding it will never accomplish it as the div could be bigger or smaller.
What have you all done to accomplish this?
<div id = "parent">
<div id = "images" style="background-color:#99ccff;">
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
<img style = "padding:0px; border:0px;" src = "..." />
</div>
<textarea style="width:100%; height:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" >
</textarea>
</div>
Seems to be impossible to get this behavior work in other browsers than chrome.
I've tried to split the pictures and textarea in two CSS table-rows to give #images a height so that #textarea-container automatically adjust its height. The next step was to give textarea 100% height and 100% width.
Absolute positioning an element in a relative positioned table cell is not supported: CSS Positioning inside of an HTML Table
So textarea { position: absolute; left:0;right:0;bottom:0;top:0 } in a relative positioned table cell will not work.
HTML
<div id ="parent">
<div id="images">
<img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" />
<img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" />
</div>
<div id="textarea-container">
<textarea></textarea>
</div>
</div>
CSS
* { margin:0; padding: 0 }
#parent{
width: 400px;
height: 300px;
display: table;
background: blue;
}
#images {
display: table-row;
height: 0;
}
#textarea-container {
display: table-row;
}
textarea {
height: 100%;
width: 100%;
}
! This solution depends on display: table, display: table-row and Google Chrome.
Live demo (works only in google chrome): http://jsfiddle.net/atTK7/4/
Display table support: http://www.quirksmode.org/css/display.html
A Javascript workaround for browsers, except for chrome, is recommended.
I'm not very good at using it, but you may wish to try display:box;. I have an example here that does what (i think) you want, but with the 'main bug' being that you can no longer re-size the textarea (but if that's not and issue, you can change resize:none;).
Maybe it is a problem with your browser. I just tried your code and seems to do what you wanted: http://jsfiddle.net/Rorok_89/DMdyY/1/
Even if I don't know clearly what you want to do, you can use jQuery to help you to get the size of actual elements, and force your textarea to expand or reduce. This should help you:
<script type="text/javascript">
var max_div_height = 1000; //The max height of your div in pixels
var total_div_height = 0 // The total height of your divs combined
jQuery(".container").each(function(){
var context = $(this);
var height = context.height();
total_div_height+=height; //If it's width, set height otherwise
});
var textarea_size = max_div_height - total_div_height;
jQuery("#myTextarea").css("height", textarea_size+"px") // Give an ID to your textarea
</script>