If you have a div:
<div id="test">
<img src="http://..." />
</div>
With CSS:
#test {
height: x;
max-height: x + y;
overflow: auto;
}
Is it safe to assume that the div will always grow past its initial height of x and stop growing (and start scrolling) at x + y as the image with height x + y + z loads?
If not, how would I go about achieving this behaviour consistently across modern browsers?
no, you need to use min-height instead of height.
height will set a fixed height and the container will not grow or shrink.
min-height will set a minimum height and max-height a maximum height, the container will then grow and shrink between those 2 points and the overflow auto will apply when its greater than the max-height.
Related
I have two sass variables for width and height of a certain div:
$width: 277.98px;
$height: 156.36px;
I want to convert this into some kind of ratio so that when adjusting the size of the screen, height and width are always proportionate to each other. The issue I was having was when trying to adjust width/height using viewport height or width (vh/vw) I kept getting errors like:
SassError: 27798px*vh isn't a valid CSS value.
Another issue is that I don't really understand how adjusting these dimensions by vh/vw even really works. What I'm looking for is the best way to go about adjusting the width and height of my div, so that they get bigger and smaller when changing screen size, but that they also stay proportionate to their original values (ratio-wise)
aspect-ratio is built into css.
In this example, .box has a height of 112.484px because it is constrained by its parent div's width of 200px.
.wrapper {
width: 200px;
}
.box {
aspect-ratio: 277.98 / 156.36;
background: blue;
}
<div class="wrapper">
<div class="box">
</div>
</div>
I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?
the scrollBar appears because of the overflow you can do 2 things
use the "overflow: hidden;"
body{
overflow: hidden;
}
you can use max-width to determine the max-width of the element and set it on both of the elements
I hope it was helpful 😁
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>
Let's say I've two sibling elements A and B. I want to set B's height fixed to (container's height - A's height). So, child elements of B won't increase the height of B.
I've tried using Height: 100%;, but it is taking container's height, not (container's height - A's height)
Sample angular app:
https://stackblitz.com/edit/angular-ivopeh
B's height should be fixed to (container's height - A's height) = (50px -30px) = 20px. So, if child element of B has height more then 20px, it should restrict its height to 20px and add scrollbar to it
I Would place this as a comment if I could.
To add a scrollbar to section b if the children are bigger than 20px you could overflow-y:scroll on section b(more documentation on overflow below). this way you only have to take care of the height which could be solved by adding flexbox or fixed values.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
if A has a fixed height then changing class B as follows should do it;
.B {
display: block;
height: calc(100% - 20px /* A's fixed height. can be percentage, pixel, em, rem etc. */);
overflow-y: auto;
}
display: block; is required for any height value set on B to be effective.
overflow-y: auto is required to display scroll bars in case B's content overflows.
here is a working demo: https://stackblitz.com/edit/angular-mw3ugb
I have an image something like below.
<img src="file.jpg" />
Below is the css code
img {
max-width: 100%;
height: auto;
}
Can anyone explain me on how does this css code make the images responsive, I mean scale it perfectly. I want to know the working behind this css code.
When your parent width is smaller than width of image, image width will take 100% of parent width.
If parent width is bigger than image width, image width will stay original.
Same with max-height. Also min-width/min-height will ensure that width/height will not be smaller than specified.
height: auto; will preserve aspect ratio for image. If you set both max-height and max-width or set height to specific size than image will be stretched
When you apply max-width:100%; to any element then that perticular element could have maximum 100% width of its parent, thus it can give you gaurantee that child will never go out of parent's bounds.
Thus if parent has suffitient width then child is shown in it's original size, otherwise it's width is matched to the parent. Thus it make our layout responsive.
Here is example : http://jsfiddle.net/xxn2hfuL/
I'm attempting to make a div with a defined height transition to a new height that is determined by its textual contents. Presumably, this requires factoring in the width of the window, because as the window width decreases, the text wraps more, becomes longer, and requires a larger height value.
#object {
width: 100%;
height: 50px;
-webkit-transition: height 0.5s;
}
#object:hover {
height: <!-- new height depends on length of inner text, but also
how small the window size is, because of wrapping -->
}
Is there an efficient way to accomplish this?
Set the height to auto. The height of the div will adjust to the content inside the div.