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.
Related
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>
I have a somewhat custom-made Draggable component. The point of the component is to make an image draggable, but only inside the parent's container.
Parent's container has a fixed size, in this particular example it's 700 x 700 pixels. In the image component, the image itself is wrapped in a div. The problem is that the image will behave normally (won't leave the parent's container) if the div has specified width and height. But, if the width and height are set to fit-content, or not even set at all, the image will leave the parent's container.
Hypothetically speaking, let's say that image's size is 200 x 200 pixels. If height and width of div wrapping the image is not specified, the image will be able to leave the container, but will stop once the top-left point of it is on the edge of the container.
To sum up the problem: If the div has not fixed width and height, the image can leave container until its top left point is inside of the container, meaning that the whole size of div / image is not taken into consideration.
The code of the draggable image:
<Draggable bounds="parent" onDrag={(e, ui) => this.handleDrag(e, ui, imageID)}>
<div className="divInlineBox">
<img className="overlappingPNG" src={imagePath} width={imageWidth} height={imageHeight}/>
</div>
</Draggable>
CSS:
.divInlineBox {
position: absolute;
display: block;
width: fit-content;
height: fit-content;
background-color: black;
}
.overlappingPNG {
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
Is it possible for my div to have flexible size and not leave the container?
If I have:
body, html {
height: 100%;
}
innerDiv {
height: 100%;
}
is the height of innerDiv = height of view port, namely the window?
... or is the height = height of all the windowās content, which may be very tall, that is, way below the windowās bottom edge?
I know I could just use 100vh, but I wish to avoid viewport units totally.
height=100% mean that the element should of that % in the parent element.
So here, If you have just a innerDiv in the html, the 100% would be just the innerDiv element. It wraps around it.
Tip: Always use border to try out the styles so that you are sure of what's happening.
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 a set of logos of variable size. I've set them all up at the same height of 50px with a width of auto:
.img-logo {
width: auto;
height: 50px;
}
This works fine until the window is resized. When the window is resized, wider logos flow outside of their container.
I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:
.img-logo {
max-width: 100%;
width: auto;
height: 50px;
}
This works but the aspect ratio is compromised due to the height property remaining 50px.
Any ideas?
With a fixed height and variable width either of the below can happen.
The img gets stretched to accommodate the variable width and skew the aspect ratio.
The img gets cropped (overflow:hidden) by the parent but the aspect ration is kept intact.
So you can make the img responsive too. But then it wont have the constant height, while keeping the aspect ratio intact.
I think it's impossible to keep its size when the window is too small and you didn't want to change ths size of image. Why not try #media,which can provide different css styles in different conditions.