I'm trying to understand why on a webpage I'm working on the image stops scaling once it reaches a certain resolution. You'll see what I mean if you manually adjust the browser size here: http://bit.ly/1nnzqeB
Can anyone help deduce what is causing this?
Because the maximum zoom percentage is limited. In case of chrome it is 500%
Sorry to say, but it may be impossible with your current approach.
I highly recommend going for an approach without using the CSS attribute of background if you always want it to be 100% of the view-port width. Use an img tag instead. You are already using Bootstrap (by the looks of your demo). So use an img tag and give it the class of img-responsive.
DEMO WITH BOOTSTRAP
Here is an example with your image and how you could implement it into your project. If you need to place any text over the image (like in your example), just make the div or heading tag have a higher z-index with either a position relative or absolute. I can provide an example if you need it.
DEMO WITH YOUR IMAGE
Related
I am trying to use css shapes instead of images wherever it seems appropriate.
Currently i'm aiming to add a white triangular shape to the end of my <li> links like so:
Here's a JSFiddle for you to tweak.
I've been with it for a while but as a novice developer I haven't been able to find an approach! The navigation bar stuff is at the bottom of the css and the html. I'm trying to keep the result responsive by using em and percent where possible and really this triangular shapes height needs to be the same as the nav_option class (which can double in height if the texts gets knocked onto the next line by window adjustment)
Any advice / solutions? Much appreciated!
Edit: if this is not possible due to my relative font-size then please detail an alternative solution? Suggesting the use of Javascript is helpful but a bit to vague for a novice like me.
Because you are using the border hack to make this shape, the measurement you need want work with, font-size, cannot apply. You will need a JavaScript solution to detect line-wrap and adjust the border dimensions accordingly.
The font size is relative with font-size of ascendant element, doesn't with width or height of parent element. So, to use responsive font-size, try to use some jquery plugin (FitText) or build a your JS.
http://fittextjs.com/
How can I make Html elements fit the vertical space?
This is what I want to achieve: DEMO but without specifying elements heights.
PS: I know how to do this with JavaScript, looking for a HTML/CSS solution.
Thanks
Edit after answers:
I want to keep this effect working (is already working) but without JavaScript, because is already consuming a lot of processor.
The effect: The title bar and the window content fit the total window space, for each window in my demo website.
Thanks
I found this works. But you should change the percentage of top and bottom to fit your site. http://jsfiddle.net/98YRH/11/
You are using ba-resize jQuery plugin, you can make your code lighter by increasing the delay option of the plugin, (default is 250)
I asume that by fit the vertical space you mean stretch the bottom of the browser if so you need to write in the css,
html {
height:100%
}
http://jsfiddle.net/LFtHg/
I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.
I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?
Thank you,
J
Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.
First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.
Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)
Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).
Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.
BTW, you know that your implementation is not yet liquid, right?
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.
Has anyone seen the new google image search. It manages to make the images float in an area. the images fit into this correctly by grouping them in the sizes.
Frog images
I guess there are two ways of doing this:
Scripting by some sort of rule involving the widths and heights of these images
A Css rule for creating the images.
In a scripting scenario we could use a max width of 1000px then group up images to fill this 4 times for our 4 lines of images.
The Css rule would have to make the images float but also re order them.
Does anyone have any other ideas on how this would work?
They re-size images with canvas js. Then set li width, height and then add overflow hidden.
You also can get same result if you set width on all your images in css img.myimg {width:70px}. I don't think it will take longer to render the page then using js code.
I think google doing all these staf on server: try to resize window - it will be reloaded in a sercond with resized images. On the other hand I found a canvas element that also could be used to resize loaded images with js