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.
Related
I'm using angular2-draggable module to resize div vertically. You can see this demo: https://xieziyu.github.io/angular2-draggable/#/resizable/default, in the Resizable Demo area.
What I wanted is, when resize the top div，the below div height decrease or increase, instead of move down. That is, this whole page height never change, just two div heights mutual adjustment. Is there anyone knowing how to do this?
You can easily achieve this with some simple css. Create a parent container that covers the full page, apply a flex-box style with column direction, and make the bottom element automatically resize to fit available space. e.g.
<div class="container" style="height:100%; display:flex; flex-direction:column">
<div ngResizable>
...
</div>
<div class="bottom-div style="flex:1">
...
</div>
</div>
</div>
I'm using Materialize framework and I'm interested in the Cards component (The small version).
The code goes like: (the small class limits the height of the card to 300px)
<div class="card small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
Here's what I want to achieve:
The image must be in the center of its parent
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
If it's larger than the cards width then it should be cropped to fit the card
It should be responsive (using responsive-img class)
The image must be in the center of its parent
This can be achieved by applying margin: 0 auto; to .card-image and setting a max-width that is smaller than the max-width of .card.
If the image has a width that's smaller that the cards width, then it
should be used with it's full width in the card
Does this mean the image should not be larger than its original size? If so the demo below should fulfill the criteria. .card-image is set to have a max-width of 400px and .responsive-img has a width of 350px.
If it's larger than the cards width then it should be cropped to fit
the card
This can be achieved by setting overflow: hidden; to .card-image.
It should be responsive (using responsive-img class)
The demo below uses .responsive-img on the image. To center the image even when it's cropped, you may set top, bottom, left, right values to -100% and margin to auto. Be sure to set .card-image to position relative and .responsive-img to absolute.
Here's a demo:
https://jsfiddle.net/suefeng/updr2ehp/1/
If you resize the window, the image should crop when the window is narrower. The image is 350x300px.
Linked a jsFiddle with examples. Hope this helps.
If it's larger than the cards width then it should be cropped to fit the card
When you specify the card-small, the height will be constrained. To modify the width, you just need to specify the number of columns to use.
<div class="col s6">
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
Some images that are too small will be distorted, see the third example with a jpg in the jsFiddle.
It should be responsive (using responsive-img class)
The responsive features baked into Materialize should provide you with some features, for example in second card.
<img src="any.jpg" alt="" class="circle responsive-img">
Here is html:
<div class="container>
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
I want container to have the size of the content div. BUT I want the widths of header and footer be constrained by the size of the content/container.
display:inline-block alone does not work because container adapts its size to the widest child.
The width of the content is unknown so explicit width settings can not be set.
Here is the image explaining what behavior I need.
In other words: footer and header follow the width of container.
Size of the content defines container width.
You can use some Javascript to do that. Like so:
var size = $('.content').width(); // To get the width of the content element
$('.container').width(size); // To set the width of the container to the width of the content, overriding any CSS rules
It's a bit rough in terms of code, but it will get you started.
I have this code: http://jsfiddle.net/LW9DJ/1/
I want the overlay text to appear centered (which is currently working), but I don't want the css class 'mycell' to have the width or height attributes set, I want them inherited from 'container' class.
This is because I am going to implement this in a responsive website in which the width and height of 'container' class are automatically changed.
<div class="container">
<img src="http://i.imgur.com/o7iAFMu.jpg" class="test" />
<div class="overlay">
<div class="mycell">Some Text</div>
</div>
</div>
You should make left-margin and right-margin properties of style, auto. When you assign auto values to these two properties, the div would be located at the center.
I need to design a webpage where each div element fits the browser window.
Here's what I have right now:
http://jsfiddle.net/E9HER/
What I need to do is to have each of those red-bordered containers to vertically fit the browser window (for heights greater than 500px).
<div class="contentcontainer">
<div class="WhoWeAre"><a name="WhoWeAre">Who we are</a></div>
<div class="WhatWeDo"><a name="WhatWeDo">What we do</a></div>
<div class="OurWork"><a name="OurWork">Our work</a></div>
<div class="Contact"><a name="Contact">Contact</a></div>
</div>
Any suggestions or help would be greatly appreciated.
you can set
.wrapper {min-height:500px;
height:100%;}
.contentcontainer {
height:85%;
min-height:500px}
apply the contentcontainer properties to the containing divs as well...
You will have to play around with the % to come to a proper height.
This will scale the divs to the browser window, but will set it to 500px for windows below that...