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...
Related
I created a website with images that have a width of 160px.
To avoid a distortion I don't set the height (or I add height:auto;).
Now the image height should be automaticly set (90px when the image is 16/9).
But when I open it with Chrome the image height is set to the original image height (1080px) while it still has a width of 160px, therefore its very distorted
Do you know why it doesnt work with chrome? (Neither on Mobile nor on Desktop) And how can I make it work.
One solution would be to se the height manually to 90px, but I want to set the width to 90% of the parent which makes the width different on different screens. Therefore a set height doesn't make sense. But I also don't want to use JS
Distortion on chrome but not on firefox
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;">
</div>
Try this:
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px;align-self: center;">
</div>
By default, align-self is set to stretch and remove the original height of your image.
<div style="display:flex;">
<img src="https://i.imgur.com/hHzrRsf.jpg" style="width:160px; height:100%;"></div>
</div>
You can use Hight 100% that will be easy for you to understand
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 a problem with cross-browser HTML makeup. In Firefox and Internet Explorer the width of a div container made with bootstrap is a fractional number (900.5 for example), and the child element fully inherits this width. In Chrome the container still has a fractional width (900.5), but the width of the child element is an integer (900), and I'd like to keep it that way. The question is, how am I supposed to do this without hardcoding the width?
<div class="container-fluid" style="margin: 10px 0 10px 10px;">
<div class="row">
<div class="col-lg-3 nopadding"></div>
<div class="col-lg-9 nopadding" style="left: -1px;">
<div id="content"> //this divs width is 900.5 everywhere
<div id="content-table"></div> //this divs width is 900 in Chrome and 900.5 in FF and IE
</div>
</div>
</div>
</div>
EDIT:
Unfortunately, I couldn't manage to upload the whole problem in jsFiddle because media queries do not work correctly there, so I put the code with almost the same situation here. In the example you can also see that element with id="content" has fractional width everywhere, but his child with id="content-table" has integer width in Chrome and fractional in FF and IE.
A solution could be to change the display property of the #content-table element. You used display:table, that let the element behave like a <table> element. In your case it is not needed because you don't use any table-cell, table-row, etc. child element (like display:table-cell or display:table-row).
You can simply use display:block. In this case the child element will be fractional in Chrome too. In your example will appear a scroll-bar, but you can use overflow:auto or overflow:hidden to hide it.
I created a JSFiddle example for the solution, using width: 200.5px for the #content element, but it is working in your code too. The link for the solution: https://jsfiddle.net/jeqmefxy/
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.