I'm experimenting with foundation. Link: http://foundation.zurb.com/docs/index.php
I've got a very simple Div:
<div style="background:url(gymBasketballHoops.jpg);height:100%;"> </div>
When I set height to 190 px it says 190 no matter the browser size, but when I set height ot 100% it's only show 50 px of image. I use lots of stuff in my current site that is going to be a background image, but i also want those heights responsive. How do i accomplish this?
<div style="background:url(gymBasketballHoops.jpg);height:100%;"> </div>
When I set height to 190 px it says 190 no matter the browser size,
but when I set height ot 100% it's only show 50 px of image.
Without seeing the rest of your HTML/CSS, I cannot recommend anything further than the following...
190px is a fixed size and will be 190 pixels high no matter what browser or resolution.
100% is the size with respect to the outer container of the div, not its content. If the outer container is 500 pixels high then your <div> will be 100 percent of that.
Since the <div> is empty except for the , you have to set a size or it will only be large enough to enclose the So without a specified size, it will only be responsive to the size of its content.
Therefore, you can set a percentage based upon the outer container, you can set a fixed height, or you can leave it out and allow content to dictate height.
Related
Is there any difference between declaring both width and max-width and declaring only one?
As I have understood, using only the max-width property causes all of an element's content to be fit dynamically when the viewport is resized.
Consider the following pen, feel free to resize the window to see what happens:https://codepen.io/harrison-rood/pen/KKzPQMW
The first example is an image with an explicit width of 800px.
The second is an image with a max-width of 800px, but a width of 100%.
See how one is responsive and the other is not? In the first example, we're telling the image it needs to be exactly 800px. In the second example, we're saying that the image should be a fluid 100%, but not any bigger than 800px, no matter what.
You can also use this idea in reverse. The third example has an image with a width of auto (as big as possible) but a max width of 100%, meaning that it will be as big as its container, but not overflow out of it.
The fourth example shows what would happen without max width. See how the image stretches way past its container because it is much larger?
Hope this clears things up! If it does, be sure to leave an upvote!
This is because screen resolutions can be different sizes. Lets say you have an element with a width of 15%, if you increase your window width, 15% becomes larger in pixels. You can set a max-width from preventing it from going over a certain width in pixels.
Using max-width, as the name implies, means that, when a container contains more content than it can fit, its width won't exceed the specified max-width.
max-width is specifically used to prevent a container's width from increasing when it contains more content than it can fit—instead, when max-width is specified, the content will overflow out of the container.
So the subject is a bit lengthy. Anyway, what I'm basically doing is trying to get a unit be a specific height (366px to be exact), but I want that height to scale DOWN if the resolution drops, thus the "min-height: 366px" is naturally out because of that.
I did come up with a rather crummy solution where I inserted an image that's that height, but the image itself is 366 pixels tall and 100% transparent. That was the only way I could really get the container be the right height.
I need this height because the container will then contain more images within it that scale. These images are absolutely positioned within the container and are on top of my invisible image.
So is there any way to have a "min-width" that then scales as size goes down or am I out of luck?
Thanks a lot.
Em.... what about max-width 366px? that should work and.. did You use (it is probably not same as this)
Suppose you have an image that is 1500 × 1500 CSS pixels to be displayed on your web page, but you expect that all of your users will be using a mobile device whose width and height do not exceed the equivalent of 500 CSS pixels. What is the best practice?
Keep the original image and set the width and height attributes to 500 or less in the HTML.
Display the image as is, setting the width and height attributes to 1500 or less in the HTML.
Keep the original image and set the width and height attributes to 500px or less in the CSS.
Resize the image to 500 X 500 CSS pixels or smaller in a program such as Photoshop.
I would like to know whether its possible to have an element with a percentage width but to the closest x number (i.e. for my case 200).
The reason for this is because I have a fluid div which is set to 90% of the browser window while I have images at 200px that fill the screen, but because of odd sizes like 830px I am left with excess on the right hand side.
I believe some JS could achieve this?
You can use min-width, min-height, max-width, max-height. Play around with JSFiddle.Fiddle
I am currently making a single page scrolling vertical site which has the viewport locked at 100% height.
The problem I have is that the designs that were given to me were calculated for a 1200x800 (macbook 13") view but I am using 1920x1080 (macmini) resolution.
Furthermore, the usable height area in each screen is limited by each widget that the browser uses so the 800 might actually be for example 638 height (it is more profound in the ipads where 768 browser height in total is not 768 at all). Also, the design must be centered in width and height. For width, I can use margin:0 auto, but height is trickier because it would need to make a div absolute.
What I did so far was to make a div absolute and have it manipulated by javascript, but I would like to know if there is a pure css way to do it since javascript would require much cases and excess code.
this is what i'm using with body height and html height at 100%
<div style=" display:table;width:100%;height:100%">
<div style="display:table-cell;vertical-align:middle;">
</div>
</div>