I have to display a bunch of images in a page. Images are of different size, some very wide and some very thin. I want to put them all in a container of fixed width and fixed height.
Say if image is smaller, we retain the size and put it at the center of container. if image is bigger, we scale it down according to the prominent direction.
Our container is 500x500 and image is say 1000x400, then it will be scaled like 500x200. Similarly if image is 400x1000, then scaled image is 200x500. Is this doable with just html/css. Any help is appreciated. Thanks.
You can use max-width and max-height CSS properties to get the effect you want:
#container img {
max-width:500px;
max-height:500px:
}
Be aware that this does not work in IE6. To make it work there you may need to either scale the image serverside OR use expressions which are nasty. There are other workarounds which you can find on google :)
You'll get much better results if you resize the images on the server. Resizing in the browser means the client is downloading much larger files than necessary, and the resizing quality is not great.
No. It's not fully doable with htm and css.
img{ width: 100% }
will make 1000x400 image to appear as 500x200 bu 400x1000 will appear as 500x1200.
You can use javascrpt like:
function scaleimage(id)
{
var image = document.getElementById(id);
if(image.offsetWidth > image.offsetHeight)
{
if(image.offsetWidth > 500)
{
image.offsetHeight = image.offsetHeight * 500 / image.offsetWidth;
image.offsetWidth = 500;
}
}
else
{
if(image.offsetHeight > 500)
{
image.offsetWidth = image.offsetWidth * 500 / image.offsetHeiht;
image.offsetHeight = 500;
}
}
}
Sorry for poor formating, seems like my iPhone doesn't support it.
The best way to do it on the server. Or manually before uploading them (if it's possible).
You can use width and height CSS properties to get the effect you want:
container img {
width:500px;
height:500px:
}
Be aware that this work in all browsers.
Thanks
Ptiwari.
Related
I have a website that looks something like this:
http://illandril.net/outer.html
(Warning: AngularJS site on a server not setup to serve it properly - you'll need to go back to http://illandril.net/outer.html directly instead of using the browser reload.)
I seem to have two conflicting requirements though...
The images need to scale down when viewed on small screens (or in narrow browser windows)
There is a link that takes the user to the page already scrolled down to the "HEADER" section
My solution to #1 was simple...
img {
max-width: 100%;
}
But scrolling down to the HEADER area doesn't work, because the browser doesn't know how tall any of the images are (at least not on first view). "Easy", I thought... and I added width and height attributes to all my images.
Unfortunately, this made the images squished on narrow screens. So I adjust my CSS some more...
img {
max-width: 100%;
height: auto;
}
That fixed the squished image problem, but now the browser doesn't know how tall the images are again and scrolls to the wrong area when the page loads.
Is there some way I'm not aware of to tell the browser that images too wide to fit in their containers should be scaled down, but with a known aspect ratio so the image placeholders are all the right size before the image loads?
If it were a normal page, using window.onload for to trigger the scroll would work (See http://jsfiddle.net/nbS3F/1/), since that waits for all the images to load... but the site I'm working on is a single-page app using AngularJS, so the load event has long since fired by the time these new images are starting to load.
You must be doing the scrolling wrong. Use:
element.scrollIntoView(true);
With:
img {
max-width: 100%;
}
Fiddle
There is no such thing as "I want a max-width of 100%, but without a max-width of 100%".
I advise you to use css3 with responsive theme technique, you have to use different parameters in each screen size by applying :
#media only screen and
search google for responsive theme with jquery plug-in , this will help you a lot to design your website in professional way.
I've found a solution (though I'd prefer a nicer one still if anybody has one)... manually checking every single image to see if it is loaded or not, and listening to the onload and onerror events of the images not yet ready, scrolling only after all images have either loaded or failed.
var target = document.getElementById(targetID);
if (target) {
var scroll = function() {
target.scrollIntoView();
};
var toLoad = 0;
var onload = function() {
toLoad--;
if (toLoad === 0) {
scroll();
} else {
console.log('Waiting on ' + toLoad + ' images');
}
};
var images = document.querySelectorAll('img');
for (var i = 0; i < images.length; i++) {
if (!images[i].complete) {
toLoad++;
images[i].onload = onload;
images[i].onerror = onload;
}
}
if (toLoad === 0) {
scroll();
}
}
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
I almost figured out what I need - see my answer, it's 90% complete
Background
I've finally transferred my website, as per a friends suggestion, from tables holding the images for the background to CSS.
When creating the original site (with tables), I couldn't get the page both horizontally centered and vertically. I used all the tags available, but it just wouldn't work. It was weird.
I got hold of JS to set content to the right place on the screen dependant on the window height and width, on onLoad() and onResize(). The Javascript was as follows:
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
// Vertically center the #content div
function setContent()
{
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentElement = document.getElementById('body');
var contentHeight = contentElement.offsetHeight;
var contentWidth = contentElement.offsetWidth;
if (windowHeight - contentHeight > 0) {
contentElement.style.position = 'relative';
contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
}
else {
contentElement.style.position = 'static';
}
}
}
}
Old to New
The original HTML uses tables to display everything. Very poor! So I've converted to CSS.
Here is the new page..
My Question
I need to center all my divs on the page, just like it was with tables. However, using the above JS in conjunction with align="center" places everything far too much to the right.
How do I center everything on screen so that when the screen is resized, it all stays in the center?
I have looked at containers, edited the Javascript above to account for .left and more. I need that tiny bit of code tailored to what I have. Can someone lend a quick hand, I've been at this for half a day. Thanks!
Basic code for what I want to center:
<body bgcolor="#a5a5a5" onLoad="setContent();" onResize="setContent();">
<div id="body" align="center">
<!-- Horizontal alignment handled with align tag, vertical via Javascript -->
<div id="img-01"><img src="images/img_01.jpg" width="12" height="584" alt="" align="center"></div>
<div id="img-02"><img src="images/img_02.jpg" width="365" height="17" alt="" align="center"></div>
// ... and more images in divs, up to about 23
How do I center all these? Just thought I'd note that originally it was a load of seperate div imgs, but I added the body div because it is referenced in the JS. When I had tables, it was just one div with all the table cells inside it, which is why it worked.
EDIT: When I DO think I have a horizontal center working, it seems more 75% to the right instead. Confused, please can someone help? :)
Your markup is a complete mess. It's using old, deprecated markup. It's missing a doctype. You are using absolute positioning throughout which is why you can't center it as you wish. You need to sit back and start from square one, learn what current modern practices are and build a very simple, one div version of this so you can get a handle on how things work today. What you show is totally unusable.
This may sound harsh but it is what it is. You are missing the basic fundamentals of web markup today.
Ok, your comment about adding as a background image got me thinking.....
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
background-color:#a5a5a5;
background-image:url('Path to your one big image');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
</body>
</html>
Works in Chrome, IE 7-9, the latest Firefox and Safari. Image stays in the center of the page no matter how big the browser window is.
first throw a class on all those image divs
i'll call mine imageclass
body {width:100%;}
.imagediv {margin-left:auto;margin-right:auto;}
note: this will work if the images are wrapped inside a containter bigger than they are.
you could actually just use 1 css property here but i did it the long way.
edit- and actually you dont' really need the body {width:100%;}
that should be default and then yur wrapper should be set to 100%(inside of body)
Perhaps this link over at jsfiddle might help you get started. It is rough and doesn't have but half of your code but you get where it is going, I hope. Things to keep in mind:
1)the 'align=center' attribute has been deprecated for quite some time...this is a holdover from the days of tables.
2)You honestly don't need to use images to display your page how you want it. CSS supports box-shadows now and using google fonts or #font-face will get you the font you want right in your page (way better than using images. Search engines can read your text this way...this is a BIG factor in ranking well in Google Search, BTW).
3)Getting your container div to stay in the horizontal center is very easy, no matter how big your browser window is, using margin-left:auto and margin-right:auto set on your container div.
4)The vertical centering is a bit trickier, but you DON'T have to use Javascript! I suggest you search for 'vertically centering a div'.
The comments about your code being a mess, well, 10 years ago it would have been how you coded. Now, CSS makes things a LOT easier but you do need to take some time to learn it and about different browser quirks. Good luck with this and please post an update!
I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for.
I have image on the page like this ( image url is generated dynamically on the server by PHP ):
<img src="/images_BIG/image_12345.jpg" />
Now - I would love to use only CSS media queries to change this image URL, let's say to this ( when browser viewport width is smaller than e.g. 800px ):
<img src="/images_SMALL/image_12345.jpg" />
I know this can be done by PHP (detecting mobile browsers and return appropriate URL) or use Javascript to change URL on the fly. But is this possible with CSS3 ? I am aiming only on HTML5 browsers so no need to care about IE.
Thank you for any thoughts and help in advance.
Wrap the image in a div. Use mobile first, so that it only downloads the small version of the image on small screens. On bigger screens, the image will be hidden and a background image will be there instead.
The two downsides - a non-semantic wrapping div, and the need to specify the height and width of the div. The upside is that you get the foreground image in the HTML.
The HTML
<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>
The CSS
// for screens bigger than 800px
#media screen and (min-device-width:800px) {
div.imgContainer {
background-image:url(../images_BIG/image_12345.jpg);
background-size:100px;
width:100px;
height:100px;
}
img {
display:none;
}
}
EDIT
Based on your comment above, I would say add the wrapping div and set its background image with jQuery.
You can set a different css file depending on your media queries:
#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
#media screen and (max-device-width: 480px) {
#image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}
In this case, you would move away from an IMG tag to a different tag (<span id="image1"></span>).
Well, as I have read your comment...if the only problem is including variable urls into a css stylesheet...what about just php including (rendering) the stylesheet (wrapped with <style> tag) into the resulting html? Then you could use <?php echo $imageUrl ?> at the place of the url. I have never done this before, it might be a silly idea but it just appears possible to me now.
basically I have a little problem with a background I am using. I need it to resize based on what width the window is, because I work with a massive screen and it displays fine, however on 1024x768, it isn't exactly working right. I'll post some images below to show you all what I mean.
On my resolution:
http://imgur.com/Pl87L
On a 1024x768 screen:
http://imgur.com/l6CUe
Also, here is the CSS for my background:
html, body {
width: 100%;
position: absolute;
top: 0;
left: 0;
background: url(/../images/background10.jpg) fixed no-repeat;
}
I hope this helps :).
Ross.
There may be a better way, but I've used jquery before to change (onLoad) the background src based on browser width, something along the lines of ...
function browserSize() {
var bsr_w = $(window).width();
if (bsr_w <= 800) {
$('body').css("background-image", "url(background_small.jpg)");
} else if (bsr_w <= 1024) {
$('body').css("background-image", "url(background_medium.jpg)");
} else {
$('body').css("background-image", "url(background_large.jpg)");
}
}
In you could use the background-size property. Not full support yet but its nice - csspie might also help out on that (think its does as I kind of remember trying this a couple of months back)
There's a pretty useful jQuery plugin that handles this fairly gracefully for you: http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It might be a bit like using a sledgehammer to crack a hazelnut, but it might do what you need.