Is there any way to have the CSS transform: scale(n) attribute scale relative to the size of the parent container. For example:
<div id="divA" class="mycontainer">
<div id="divB" style="width: 100px"></div>
</div>
The idea being that if 'divA' is 200px (default size), then 'divB' would maintain its 100px, but if 'divA' was 100px, then 'divB' would become 25px.
The reason I am not specifying percentages in this example is because we need to adjust for third-party components that have their own CSS rules. Redefining them all would lead to a maintenance challenge.
Related
I'm trying to figure out how to make an element fit (like object-fit) into another div.
That specific element is an Image Container (div.ratio-box), which has a intrinsic aspect ratio css (the padding bottom hack to avoid page jump).
The problem is that with portrait image, the Image Container (div.ratio-box) is overflowing the parent (div.slide-cell) . So what I want to do is to calculate a new width base for (div.slide-cell.portrait) on the following known value:
Img Height,
Img Width,
Parent's width
Parent's margin from the browser window
https://jsfiddle.net/5d6zrueh/3/
<div id="slider">
<div class="flickity-viewport">
<div class="flickity-slider">
<div class="slide-cell portrait is-selected">
<div class="ratio-box centered" style="padding-bottom:150.06002401%;">
<img src="http://via.placeholder.com/166x250">
</div>
</div>
</div>
</div>
Hope it makes sense to you.
I have the following structure
<div class="container">
<div class="wrapper">
<img class="image">
<div class="child-2"></div>
<div class="child-3"></div>
</div>
</div>
container has fixed height and width.
It's responsive design, so the image will scale to fit inside of container with max-height and max-width set to 100%.
child-1 and child-2 need to be positioned on top of the image at specific spots. To achieve that, I made wrapper have max-height and max-width of 100% too, so it wraps itself around the image. Then I can place child-1 and 2 relative to wrapper.
In WebKit, it works beautifully, in FF and Opera however, it doesn't. They don't respect the max- at all.
Per spec, if <div class="wrapper"> has auto height, then a percentage max-height on its children should behave the same way as auto max-height. Sounds like FF and Opera are following the spec and WebKit is not...
I am applying max-height to nested divs? but it is not working as expected root element working is perfect but child height not applying?
<div style="max-height: calc( 33% - 10px);">
<div style="height:30px;"></div>
<div style="max-height: calc( 100% - 30px);">
//height not applying
</div>
</div>
Unfortunately, percentage heights are calculated from the explicitely specified height of the parent element, not its actual height. If height is not set, it is auto, which can't be used for percentage. Only Opera 12- (Presto) calculates percantage min-height from the specified min-height directly.
Assuming you don't care about old browsers (since you use such modern features like calc()), I'd suggest to try Flexbox for this layout.
I am designing a fluid layout (no fixed px, all in %)
I have the HTML as;
<div class="parent">
<div class="fl child"><a class="prev"></a></div>
</div>
If I check in Firebug, the height of parent is calculated as 400px..But if I give child as height:100%, it does not take the entire height..
How do I fix this?
Unfortunately heights don't work so well with percentages, you can take a look at the min-height css property but you may need to employ some javascript.
I want to make a container automatically expand. To do so I want to use max-height property. This is my html structure
<div class='palm-row first' style="max-height:200px">
<div class="palm-row-wrapper">
<div class="textfield-group" x-mojo-focus-highlight="true"
style="max-height:200px">
<div class="title">
<div class="truncating-text" id="nameField" class="recipient-picker"
x-mojo-element="TextField" style="max-height:200px"></div>
</div>
</div>
</div>
</div>
.recipient-picker{
overflow:hidden;
margin-right:0px;
max-width:300px;
padding-right: 4px;
}
I want the textfield to expand in height. However it does not work settings max-height. The container do not change height. However when I set min-height, the correct height is applied.
Any ideas how to achieve this? Any other ideas?
max-height sets the maximum height of an element if it tries to grow past that size. min-height sets the minimum height of an element if it tries to grow below that size. In your case, the default textfield height is less than your specified min-height, so the browser will increase it's height so that the min-height constraint is satisfied.
So what's the problem with just using min-height if it works?