I have a block element DIV with a fixed width and height. I used a background image for this DIV. We can change the width dynamically using percentages (%).
Is it possible to get the proportional height for that width? If so, how can we accomplish this?
Here's an example:
100px width #div has height:20px;
So, 50px width #div has height:10px;
How can I achieve this?
You can use height: 0 with a percentage padding-top.
Check out http://webdesignerwall.com/tutorials/css-elastic-videos
Related
I am working with react and tailwind css. I want to give 100px height and width to my div. If anyone have an idea how to do it in tailwind css please help me. Thanks in advance.
In your div tag you need to add classes for height and width. In tailwind-css we can give fix height and width using [] (square brackets). Like,
<div className="h-[100px] w-[100-px]">Your Content</div>
Use h-{number} or h-px to set an element to a fixed height.
Use w-{number} or w-px to set an element to a fixed width.
I am using component based architecture and want to show bootstrap modal which gets adjusted to image height and width.
Most of the forums suggested to use height and width in percent but this will not going to help as image size can vary.
Has anyone achieved this?
There's a simple solution for this. first of all you will need to override the modal's width property (height is auto adjustable and shouldn't be a problem), the modal window uses the .modal-dialog class, so use !importent to override width
.modal-dialog {
width: fit-content !important;
}
content-box will adjust the width according to what the element contains.
here's a demo
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
Using the option data-height="100%" sets the height of the Fotorama to the height of the window. This is by design. However I would prefer it set to the height of the parent element.
I'm containing the Fotorama inside of a container which is almost full height, but has padding for navigation which is fixed to the bottom of the window. But on mobile is fixed to the header.
Any help would be greatly appreciated!
height = $('#fotorama').parent().outerHeight()
$('#fotorama').fotorama({width: '100%', height: height})
I'm creating a responsive site with a gallery composed of fluids images . For this, I must use css img {max-width: 100%;}. I also want a fade effect on hover.
Does anyone have a solution to this?
So far, all the solutions I've tried, does'nt work with css img {max-width: 100%;}
Thank you very much for your help!
Define image width also along with its max-width. And it must be in pixels or em's.
You don't need to keep max-width or min-width in %'s.
Browser renders from its original width or height value. As
This is for example.
img{
width:50%;
height:30%;
max-width:300px;
min-height:100px;
}
And every images'll be flexible with viewport.