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.
Related
I was reading an article explaining the css properties width and max-width and came across this example:
img {
width: 100%;
max-width:700px;}
This says that the fixed width of the image, should take up the entire size of the parent element — if the width of the parent element is explicitly stated, — all hundred percent of it, yet the image should never exceed 700px. It means that the image can be less than 700px, if that suits its situation better (e.g smaller window size) but it should never be more. So there are two conditions here, that the width of the image can be 100% of the parent element if it wants to but it must not never be more than 700px.
But isn't it unnecessary to add the width:100% here? Doesn't max-width:700px imply that the width will be 100% if the parent is less than 700px anyway?
First, width defines the width of a specific element while max-width define the maximum size the element is allowed to have.
Second, width:100% use the parent's width to calculate the current width value whereas max-width:100% use its own original width to calculate the maximum size. So, the image with width: 100% could be larger its original size (scaled base on its parent width). On the other hand, the image with max-width: 100% could be smaller but never be scaled larger its original size (maximum valid width = 100% x original width). That's why it's called fluid image.
Let's say you put width: 700px for an image. When you re-size your screen the image stays stably 700px. Let's say you on a mobile phone and its screen width is less then 700px the image will not fit in the screen. So it will stretch out your page and make it not mobile-friendly. At the same time, when you set max-width:700px it will re-size up to 700px but when the screen goes smaller and the images don't fit in the screen it will automatically re-size it to fit the screen.
As far I understand you want to get the image fit to the size of its parent container with the constraint of not exceeding the width of the image more than 700px.
Then I will say yes it is unnecessary to give "width: 100%;" either way default value for width will get selected i.e. "auto".
Because of this whenever your parent container will be smaller than 700px, your image will fit your container (since "width: auto;").
P.S.-Please refer "object-fit: contain" property of CSS, as that will also help.
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.
In CSS, if I set the width attribute to 100%, like so:
width: 100%;
If the width of the document is larger than the width of the window (horizontal scrolling), the width of the element is only the width of the window. If I scroll to the right, it gets cut off immediately.
How can I use CSS to set the width of the element to have a min-width of the document width so it doesn't get cut off when scrolling?
Percentage based width is dependent on the width of the parent element. So if you set width 50%, it will be 50% of the parent container. Therefore you need to ensure that all the parent elements are properly sized.
There may be a solution using absolutely positioned elements. However this depends on the position attributes of the parents as well.
There is no construct to get the "document width" on a page (in pure css). You are constrained by parent elements in nearly any case.
However a solution may be achieved with Javascript.
I would suggest you investigate the size of the chain of parent elements with Firebug or another browser debugger.
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 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.