I'm trying to make text span the entire width of the page, like so:
http://www.thecut.net.au/
I've looked at the source, but am unable to make sense of how they achieve this. Some direction would be useful -- thanks.
Learn how to use your browser's inspector. It's very easy to work out what you wanted to know:
The solution for the website you mention is to use an image. Images are much easier to control the appearance of, especially when accounting for the many different browsers and screen sizes available now.
Two ways to display an image that spans the width of the webpage are:
Image tags: <img id="largeTextImage" src="image URL" style="width:100%;" />
Background Images: <div id="largeTextDiv" style="background: url(image URL) no-repeat top center;"></div>
Image is definitely the way to go if you're trying to reach a pixel perfect look and to simplify your life.
Otherwise, you could also look at using different font-sizes and using media queries so that depending on the width of the window, a different font size would show up. This wouldn't be recommended though.
Related
What is the best way to get a smaller version of an image I want to use onto a webpage, but still allow the person to view the full image if they click "view image"? This question could really be broken down into two parts:
Say my image is 900x900px: Is there a way I can display that image at a much smaller size, like 100x100px (so that the browser does not have to load the entire 900px image) but allow the person to see full size image if they click "view image"?
Additionally, what is the best way to take the 900px image, and display it at only 100px? Assuming I can't do this ahead of time with photo editing software, should I use the height and width tags in HTML or in CSS? (It seems like they both resize the image (scale) rather than crop). Thanks
With the usual approach to use the heightand width attributes, the whole image still has to be transferred to the browser.
So if you add a link somewhere (the image itself could be the link), the user is still able to access the complete (900 x 900 px) image.
Regarding image cropping: There is some trickery you can use as outlined in this SO answer.
JsFiddle Demo 1 (the image itself is used as a link to the original full-sized image)
JsFiddle Demo 2 (using the first demo as a base, but this time cropped the image)
Easiest way is to use it as a background to a div and then use the background-sizeattribute. An example would be what I did with my website.
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-position:20% 20%;
background-size:600px 800px;">
</div>
Using this method, I was able to take a 3200x2400 photo and scale it down to 800x600 photo. Plus, In my opinion, it's a lot easier to style a div with a background photo than just a plain image and I feel it just does more. Just so you know, background-position changes what part of the scaled in photo you show :)
<div id="image"
style="background-image:url(images/Greensburg-Commons-Oblique2.jpg);
background-size:100% 100%;">
</div>
Also, you could change the background size to 100% by 100% and that way the background will display the full image all the time and will automatically scale down as your window size changes or screen size :). Best for fluid layouts.
well you can set the image as a background of a div and then set the background-size property
#yourDiv{
width:100 px;
height:100 px;
background:url('path/to/your/image');
background-size: 100px 100px;
}
you could set different properties for :hover but you'd need to use javascript to change the properties onclick
You can use a lightbox or with just CSS, but it will resize the page. Now this is a very simple example so don't expect a beautiful display.
HTML
<img src="img.png" class="resize">
CSS
.resize {
width:100px;
height:100px;
}
.resize:hover {
height:900px;
width:900px;
}
Now personally I would use a javascript or just a lightbox. It will look much better right out of the box with minimal adjustments. Just my 2 cents.
I'm working on a site by hand coding for the first time (mainly a print designer). I'm trying to only use HTML and CSS, as I haven't had the time to dive into any Javascript and I really want to understand what I'm using. So, my main content is set up in a grid of images, all the same size, 3 columns wide.
I'd like to use media queries for responsive design with different browser/device sizes. Best I understand this, you create different CSS files for the same HTML layout that load depending on the size of the device/browser.
As it is now, each image in the grid is set inside a div as an a tag. I then used CSS to define the image with the background property.
<div id="main-content">
<div id="project-1">
<a id="image-1" href="URL here"></a>
</div>
<div id="project-2">
<a id="image-2" href="URL here"></a>
</div>
...etc.
#image-1 {
background: url(image.png) no-repeat;
width: x;
height: y;
}
...etc.
After a bit of research, it sounds like this is not a good solution; it's better to use the tag in the HTML itself.
My question is, am I going about this the wrong way? I'm a little confused about where to put the images so that I can modify the layout with media queries. Thanks in advance for any advice. cheers!
This looks absolutely fine to me.
The only thing I'd do in your case is to add the images with an <img> tag inside the <a> in your HTML and give them all the same class, instead of putting them all in individually via CSS, as then when you define the media queries for your responsive layouts you'd only have to modify the width and height for that one class and your images would all scale accordingly. You'll just be saving yourself a bit of work.
I hope this is relatively clear. :)
Let's say I have < img src="http://www.always-going-to-be-absolute.com/images/thisimage1.jpg" width= "some px" /> (only a .jpg or .gif). With only the width specified, are there any (any!) circumstances under which the height and width of the image may not scale accordingly, or may not scale at all, assuming there is no CSS or other code affecting it? I can't think of any circumstances (and research doesn't bring up any), but I'd like to be sure by running this by some people who have more experience than I do.
thanks!
No there are not. However, note that is it quicker to load an image of the correct size.
If any other css code or anything else is not affecting it, then I don't think there should be a problem. Try using images of correct sizes though. Helps reduce loading time and preserve quality of images as well. Try it out and if you get any scaling or other problems, you know where to ask, right? ^_^
It looks like you're scaling the images through width. From section 13.7 of the HTML 4 specification:
All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
I think the only two problems you may have here are:
Small images: If the image is 10x10px and is scaled to fit a 1000x1000px container, it will be pretty hard to make out what the image is supposed to be.
Thin images: If your container is 1000x1000px and the image is 250x25px, scaling the image to fit the container will result in a 1000x100px image.
OR, is there a way to at least determine the width of an image from a URL.jpg (if it's not specified in the html) without downloading the image?
In front-end JavaScript you can simply:
img.clientWidth;
img.clientHeight;
On the back-end, PHP has a getimagesize() function which returns height and width. I imagine other languages also have similar functions.
I'm drawing a blank at how to make text dynamically grow and shrink to always fit a page perfectly so that various word groups always take up the full width of various screen sizes.
I'm on a phone browser right now, so excuse me if I don't post full html examples, but here is the gist of common scenarios that I'm trying to have a technique to resolve:
<div>
<div>
<a>nav element</a> <a>another</a><a>lots of text in this nav element</a>
</div>
<div>
... another set of links wwith different text here ...
</div>
<div>
... and another ...
</div>
</div>
All told, the above layout would take up exactly three lines all the way across the screen on any screensize or window size.
A simpler example:
<h1>Hello World</h1>
Wherein not only would the h1 have a width of 100% of the screen (easy) but the text content itself would grow in font-size to fit 100% of the screen.
Similar techniques that I am aware of:
Font-stretch // except it just squashes/stretches text without regard for the text containers
Font-size:5%; // except this deals with the vertical scale of each letter.
text-align:justify; // except it just adds space instead of scaling up the font.
I'm not aware of a pure CSS way to accomplish this. I believe you have to use JS. There's several scripts and plugins out there for that. Here's one for jQuery:
http://fittextjs.com/
Media queries is probably the closest thing that exists to what you are looking for. Another good term to search for is "Responsive Design", its been a fairly hot topic on most of the designer blogs I follow in the last few months.
You can't. Not with css.
Sorry.
You can probably program something with javascript.
I just finished reading YSlow recommendation to always define the image dimensions (height/width) to improve HTML rendering performance.
However, I don't know the image dimension I'm linking too.
What I do know is that the height will never be larger than 200px and the width will never be larger than 300px
Would I be a benefit if I defined (CSS) :
img {max-height: 200px; max-width: 300px}
For HTML performance rendering?
No, setting the max-width and max-height doesn't improve the performance.
The reason for specifying the width and height of images is that the browser will know exactly how much space the image will take up. If you leave the image size unspecified, the browser has to reflow the layout when the image loads.
You can see this nasty effect on some pages, where the page is first loaded with no placeholders for images, and then the contents jumps around making place for the images as they load.
If you can't specify the size of some images, don't worry too much about it. Just make sure that the layout behaves nicely when the images load, and don't jump around too much.
Setting the max height and width of an image in the css will make the img tag resize the img based on the contraints but if you are using a backend scripting language like asp.net or php you an use their img libraries to scale the image on the server side an either save then to the hard drive to use later or resize on the fly.
You can check out http://shiftingpixel.com/2008/03/03/smart-image-resizer/ for php as a starter
Or if you are using .NET you can check out this link http://weblogs.asp.net/gunnarpeipman/archive/2009/04/02/resizing-images-without-loss-of-quality.aspx
Images with different proportions would not look good, since they would be scaled. I would not recommend this.
In this case I would definitely not set the height and width of the image since you don't know what it is going to be. If you know what the size is going to be then setting is good because it will cut down on the amount of repainting and reflow that the browser has to do when rendering a page.
The less it has to do then the better the performance will be on the client side because you are not making the browser work too hard.
Stoyan Stefanov explained it really well in a recent blog post
I think You'd rather want to wrap that <img> into a <span> or <div> element with max-height and max-width set. Also, it ( span or div ) should have overflow:hidden set so the image doesn't go out of the div's range.
It definitelly isn't recommended to set these setting directly to image because You'll get different and slower rendering in different browsers.