Would like to find a way to add a div with position fixed and max width, that should be placed either in a div with overlay or outside overlay. But the tricky part is that, when the window is scaled, I would like it to adjust per percentage....
So if I have a div with max width of 800px but when I make the browser window smaller, it should shrink. Is this possible for all browsers?
Or do I have to use a plugin for this, like jqModal? Please help. Thanks!
Just define a max-width, and then use percentages for scaling purposes:
.modal {
width: 50%;
max-width: 800px
}
Related
I'm creating a website with a flexible layout. I have a background video, and I want to set it so that it has either 100% width OR 100% height. I only want the width OR the height to be used in any given situation, and I want the browser to choose whichever of the two dimensions would make the video the largest. I can't use min-height and min-width, because the video is significantly larger than the size of the screen, so I have to set an actual width and actual height, but I want the browser to switch between using width or height depending on the aspect ratio of the screen.
Does anyone know how this could be done? Ideally the solution would only use CSS and HTML, but if this can only be done with JavaScript, I'm open to any suggestions! Thanks in advance!
Adding a meta tag with viewport as it's name and then setting position attribute in css might do it what you needed.
Combining min-width/height with viewport width/height:
CSS:
#backgroundVideo{
min-height : 100vw; /* the height will always be at least as great as the viewport width */
min-width : 100vh; /* the width will always be at least as great as the viewport height */
}
I am creating a simple portfolio webpage for an photographer. He wants to show his pictures in the web. So the images should be responsive. So I wrote following code to the image class:
img {
max-width: 75%;
height: auto;
}
So it fits the image to the width of any screen, but I want to show the image in full height. So if the image has a bigger height, the user have to scroll down to see the whole image. So how should I set the height, so the whole image whould be shown immediately?
With regards,
Andrej
did you try reversing the same, as in, try giving it a height, and leave the width to auto..!!!
Because u just need to set either of the two, and the other adjusts accordingly...
Simple:
max-height: 100%; /* or a bit less */
But note what the docs say:
The <percentage> is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
Ok, I have found a solution.
I just set the max-height with the vh units (viewport height).
Thx for your help.
try this way: img{max-width:100%; max-height:100%;}
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D
I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.
Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there - is there a way to also do this in a CSS flow layout?
A quick test shows that this:
<img class="test" src="testimage.jpg" />
combined with:
img.test { width: 50%; }
Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:
img.test { height: 50%; }
In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.
EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.
Think of it this way:
body is 100% of window size.
img is 50% of body.
img is 50% of window size.
Now suppose I add a div. like this...
<div class="imgbox" style="width: 100px;">
<img class="test" src="testimage.jpg" />
</div>
Then
body is 100% of window size.
div is 100px, ignoring body width.
img is 50% of div.
img is 50px, regardless of window size.
If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.
bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?
Try setting max-width to something like 95%. Thank way the image will shrink when the container width is less then the width of the image. All of the parent containers would need to adju
max-width:95%;