I have made a little gallery (http://www.kongeboa.dk/billeder/3/Coco/)
If you refresh, and choose to view one of the other thumbnails below the actualy image, you will see that the image resizes randomly...
I have a width on the image tag set to 100%
I am sure, that all the images has a size of 460px to fill the width of the design.
When all thumbnails have been viewed, the big image shows in the correct size (460px)
The problem happens in Safari and Chrome. OSX and Windows.
I have no idea why this happens, and i dont know how to debug it...
In short: remove float: left; from the '.image' style.
Since the '.image' style makes the div containing the image float left, the 100% is relative to the size of a div which sizes to fit the image, so you'll probably get variable results in different browsers. If you remove the float: left; from the '.image' style, it'll fill 100% of the width, and the image will in turn fit 100% of its width, and everything should be grand.
You should remove float: left from .image.
It's some kind of WebKit bug from some combination of width="100%", the shrink-wrapping behaviour of float: left, and image caching.
Live Demo - (check it in Chrome, you'll see the image is full width)
If you know they've all got a width of 460px why not set width="460"? As far as I can recall percentages for img.width are not part of the HTML spec.
If you want to make sure the image always fills its container, then what you want is the CSS style width:100%.
I give it a try...
Remove width="100%" from the img-tag and remove width:100%; from the .img class. Not sure if that solution would work for you?
Related
So I'm trying to make the background image for one of my divs spread the full width of my screen while keeping the content in my div set at a certain width.
I've tried overflow:visible , min-width:100% , max-width:100% and none of these options seem to be working correctly. I'm unsure if it is because I've set the background image by overriding the original through CSS or what.
Since my webpage is not live yet, I've linked an image HERE to help explain.
The place I'm trying to put the rule to make the background image go full width is under #content-core with max-width:100% only to have all of the content go full width instead of just the background image.
Any help would be much appreciated and if you need more information please ask. Thanks!
You'll want to nest your content inside a container div that you'll set to 100%.
.mycontainer {
Width:100%;
}
.mycontent {
Width:80%;
}
If I understood your question right, then are overthinking this,
Simply use a main container with the CSS
background-image: url('example.com/img.png');
attribute and insert a different div in it with your content.
See here
Hello i have been working on this website for a while and i have been working on making it resizable when you adjust the window size (or resolution of screen) and when i finally got it to work now the links on the graphics are not clickable
http://javiermedinaloera.com/
Here is my website, all of the circles are coded to be links but only two of them work
Thank you very much, i would really appreciate your help
I know what your problem is: you have 100% width for all items in each line, but they have the same z-index, of course one will "cover" the others. The solution is change the width of them, give each of them a width let's say 250px, then adjust your "left" attribute. Probably you could see your site works in IE, because IE doesn't render your css the ORDINARY way.
Your div tags are not formatted with specific widths. Each div tag is taking up close to the whole width of the page. You need to give them specific widths. In the style tag at the top, add this CSS.
<style type="text/css">#arrieros{ width: 270px; }</style>
Just set the width to 270px for each div that you have and it should work fine.
If you go to http://digitaldemo.net/anova/ and resize the browser to make it smaller and then scroll horizontally to the right, you will see that the background now covers the part of the page outside the wdith of the visible screen.
Why is this happening?
Any help would be most appreciated!
Best,
Cynthia
Add this.
#navbar{ min-width: 1100px; }
same to .footer, .wrapper, and .footerbottom
min-width:1100px
The problem is because the #nav element has a hard width of 1100px and a width:100% background on another element is only 100% of the width of the viewable area.
Changing the min-width on the <body> to
body {
min-width: 1100px;
}
will set your minimum page width to be the length of your longest element and therefore the CSS background will extend as it will be 100% of 1100px wide.
For future projects I'd recommend reading responsive web design - one aspect being to design a site will adapt to the available width/height of a device, through a combination of non-fixed dimensions on elements and/or CSS Media queries.
I just debugged your code and found out the issue. The issue is you are using overflow:hidden property. It is causing problem. like in class (.masthead) you apply this. Just remove it. then it is visible.
how to scale img by percentage of self and not percentage of its container?
I can't believe I never ran into this problem before, so I'm guessing either the standard changed, or I am doing something wrong, because I am pretty sure that back in the day, before CSS even, it was possible to scale an image like this
<img src="something.jpg" height="50%" width="50%">
but now that scales it by the container objects size, which is totally irrelevant to me.
IS there no other way than for me to start calculating pixels and such in a javascript to achieve this very simple image styling?
If I have an image 500px wide, and the user selects 50%, I want that image to show up 250px wide, I don't care one bit about the size of its container at this moment...
Try the CSS zoom property. I believe it works on Chrome, Safari, and IE, but not Firefox.
img use style="max-height:100%;max-width:100%;" will fill up container box but keep all image just inside container.
use style="min-height:100%;min-width:100%;" will fill up container and clip if image have different size with container box.
not work for browsers dont support max\min-height\width (below ie7 I think).
Set the percentage size on the image, then use a wrapper around the image with position: absolute;
http://jsfiddle.net/KWWZz/
Some unfortunate drawbacks:
This doesn't seem to work in IE7 (and as of the time of this posting, jsfiddle doesn't seem to be working for IE7 or IE8, so it's hard to really show that)
Because you're using absolute positioning, you'll probably have to alter some parent container's positioning context to get it to work for any given situation.
I ended up solving it like this (with javascript/jQuery):
-Create a div
-Insert the image
-pick up the dimension from the image
-set those dimensions to the DIV
-set image dimensions to 100%
That way the image till initially be of original size, my jQuery resize() on the DIV will work and the image will always fill the DIV.
I have a really cool website that allows people to upload images. Sometimes there images are really large, as seen in the below div:
![Overflow][1]
Is there a style that can I add to my DIVs to fix this?
Link
Set your CSS overflow property on the div to one of these:
overflow: auto; /* Adds scrollbars only when necessary */
overflow: scroll; /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden; /* Hides any content that overflows */
You can use the CSS overflow property: set it to hidden or auto to either hide content or add scrollbars if necessary.
Generally speaking, with large images you want to thumbnail them and not automatically display them, particularly if they're over a certain size.
Using the height and width CSS attributes (or the height and width attributes) will scale the image but it'll still download the whole thing. If its large that could be a problem. It's best to generate a thumbnail on upload, display that and then allow the user to click on that to display the full-size image.
<style>img { max-width: 100% }</style>
This will make the browser resize images to fit inside their containing box. There's a few drawbacks, one being that it obviously won't work in IE6 (maybe 7?), and if the containing element has padding you'll need a wrapper around the image to make it fit.
Another great one although not fully supported would be adding max-width: 400px to your image.
Instead of using CSS, you should do a basic width & height check on your server side, and if it goes beyond a certain threshold use HTML/Javascript to resize the image. Many website forum applications do this and often allow you to click to expand the image.
Then make sure you use the Z-LAYER property to make sure the image floats above content blocks so when the image expands it's above everything.
Automatically resize each of the uploaded images, using a toolkit like ImageMagick. You'd also end up with better looking images, because it'll resample (rather than just resize).
You can then create good looking thumbnails, previews and other sizes of each images that'll fit nicely into your template designs.
If you don't want to go all the way to resizing the actual image file, and want to maintain the proportions of the image, then you can interrogate the image for its sizes (height and width) then multiply them by a required factor to fit into your div.
For example, if you have a 1024x768 image and want to put it in a div that is 800 wide, you know the width will be 800, and the height will be 768 x (800/1024) = 600. Then when displaying your image you can set the height and width properties as required.
or, with some little piece of javascript, you can check for an image width. if is larger than Xpx, then you scale to Ypx. Ofcourse, you will have a little "image flick" until the page is completly loaded.
You can inspire yourself from any IPB forum :)