The image in the bottom of the parallax theme appears to be too small. If you expand your browser to full height you will see that it is showing spacing on the bottom.
My first guess is that the image is too small. However the height is actually larger than the one I'm using on the top widget area. Should I get a larger picture or is there something I can do with css?
URL: jeff-cunningham.com
It is using the width to scale the height. So to get the height you desire, you need to make sure the proportions of the image are enough to go down far enough.
As an easy example lets say your page is 1000pxs wide. You need the image to go down 2000pxs. You would then need your height to be 2 times bigger than your width. A picture with a width of 1500pxs and a height of 2000pxs would not work because the image would scale to a width of 1000pxs and a height of 1333pxs.
Related
I have a slider on my page with the property background cover applied so it fits the whole thing. The slider also has a 50vh fixed height.
The background always ends up cutting things from the image that I don't want.
How should I go about choosing the right width x height knowing that the website will be seen in very different devices?
The only other options besides cover are "contain" which scales the image to the largest size such that both its width and its height can fit inside the content area, thus leaving uncovered areas in the div's background. The other option is setting it to "100% 100%" which will stretch the image, and distort it in odd sizes.
Pick your poison ;-)
I have written a fairly basic javascript function that when an image is clicked on a full sized version appears in the foreground.
The image is set with max-width and max-height numbers in a CSS file such that it leaves some space around the outside and it preserves it's own proportions.
The problem is that if the image happens to not be large, or the screen of the users device has a very high pixel density then the 'larger' image might not be any larger.
Is there a way I can keep proportions, not exceed say 90% on either side, but set the largest dimension to be 90%.
The closest similar method I have found is the fill option for backgrounds.
Cheers
Set the width and height of the image to a relative value like 100% - (margin + border + padding) so that it will be stretched regardless of its actual dimensions.
Using max-width and max-height is a nice way to restrain your image from growing beyond specific proporitions, but leaves room for the image to decide what size it wants to be within those bounds. You say you do not want this, thus set width and height as well.
You can embed that image in div tag and apply css property width:100% to image and on click of image increase the width of div proportionately as per the resolution. In this scenario image with less width than parent div gets adjusted as per width of parent div.
I want to show an image centered in window (horizontally & vertically). If the image is too large, I want to scale it down to fit (no scrollbars).
Here is a live demo - try resizing the window. The image scales to fit but is not vertically centered.
I am trying to use CSS table/table-cell, but this breaks max-height set on the image. If you uncomment the table/table-cell, the image will extend beyond bottom of window.
Is it possible to have both? I've found similar questions but not this exact setup.
I used vh and vw to capture the viewport dimensions. Is this sort of what you want?
I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom.
What can I do to make sure that the 480px will always be in relation so the size of the user's screen?
I did some searches and it seems that using background-image: cover or background position I can do some stuff but highly likely it's not what I am looking for. What can I do tackle this issue?
One way to achieve this is to place the image in a container that can scale with the page.
Height is a hard attribute to scale, but you can achieve it as long as all of the parent elements have a specified height as well.
You can use CSS code such as
height:40%;
to scale elements.
Scale the page's height here to see for yourself: http://jsfiddle.net/L7uWd/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
Set the image height to some percentage instead of pixel, that will automatically handle with the size of the screen.
I've coded myself into a corner or I am overseeing something obvious here. I have a semi-fluid CSS layout that is designed like this:
header - 100% width at all times, contains a x-repeated background image
container - fluid (960px to 1200px, centered, contains two columns)
footer - 100% width at all times, contains a x-repeated background image
In almost all cases this works fine.
In summary, the design as a whole scales to any width, yet the content part only to 1200px at a maximum. However, since this concerns a photo site, sometimes images are wider than the container width of 1200px and the image breaks out of it. This is perfectly fine, I want the full image to be shown. However, I want the header and footer to scale to the widest element, in this case the image. This is not happening and is particularly troublesome when I resize the window to a width less than the image and then scroll to the right using the horizontal scrollbar: it leaves a clear gap on both the header and footer whilst I want them to stretch to at least the image/content width.
Simply setting the width to 100% is not enough as that concerns the viewport, not the content width. I can forcefully use min-width with a large value for the header and footer, but that leaves a horizontal scrollbar in normal resolutions. I could hide that scrollbar using overflow:hidden but that would chop of content and not display a scrollbar when the window is small.
To make a long story short, I guess what I want is that this layout would work as a table would work: if one column's content is wider than its size, it pushes all other rows to that same width. The largest width determines the total width. I prefer a solution without javascript, but am thinking it is either not possible or I am overseeing something very obvious?
100% width sets the element's width to 100% of the width of the element it is contained in. In your case, it seems this is the window itself (or the body element). To make the header and footer divs (I'm assuming you're using divs here) scale with the image, they will probably need to either be included in the same div that the image is in, or inside a div that the image div is also in, assuming that div is scaling to the correct width (don't assume it is scaling to fit the image).
However, in many cases using a table for your layout can be much cleaner, and will handle the type of horizontal scaling you're looking for without needing to resort to css hacks.
To make a long story short, I guess
what I want is that this layout would
work as a table would work
display: table on the common container of these elements, and display: table-row or table-cell on its children. This will not work in IE6, but clever things can be done with its CSS expression() hack to simulate this.
I would rather suggest, however, that you not set a maximum width at all, and allow the design to flow better according to the user's desired window size.