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.
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 ;-)
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.
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.
Is it possible in css to repeat (repeat-y) your image on a background of a div-tag (or other tag) but without cropping it.
So when the image doesn't fully fit in the tag the tag's height increases.
Not exactly.
You can specify min-height to that element equal to the background image's height, but that will not guarantee that the first time the image repeats that repeat will be 100% visible too.
If you want all the repeats to be visible at 100%, you'll have to use some javascript.
Edit (since question was updated) : If you're OK with jQuery:
http://jsfiddle.net/ytXd6/
Basically you set min-height and for multiple repeats you divide the height by the image's height and add the remainder so that the div's height will be always multiple to the image's height.
I am trying to resize an image using only CSS, the problem is I don't know it's dimensions.
What I have tried so far is putting the into a and then making the image have 105% width. The idea was that the containing div would have no size other than it's contents, but this is only make the image the size of the next ancestor that does have an explicit size.
In order to resize something in CSS you have to either give it an exact pixel value or base the size on something else.
If you were to set an image to have a width of 105% of its container then that container must have some width for you to use. If it's a regular div with no styling applied then its width will be the full width of that divs parent and your img will be 105% of that.
If the div holding the img is floated then it will be getting its width from its contents (aka the img). This won't work because you can't have two elements getting their widths from each other. One of them has to be constrained somehow.