How do you resize an image so that it fits inside a fixed size container while maintaining its aspect ratio? The apparent solution is to set the image width, height, min-width and/or min-height to 100% or auto. However, this solution is not generic enough to handle images with varying aspect ratios properly. Here is an example:
The CSS3 :nth-child() selector pseudo-class allows you to select elements based on their position in the set of children of their parent. It accepts an argument in the form of an + b. How exactly does it work? Let me explain.
In very simple words, the expression an + b matches every ath element in the set starting from the bth element keeping in mind that (i) the index numbering starts at 1 (ii) zero and negative values do not represent any element (iii) text and non-element nodes are not counted. The following corollaries exist:
Earlier when I decided to redesign my blog I asked myself this question: what screen size should I design for? I answered myself by looking at the visitor data collected by Google Analytics. Even though I decided to go for a responsive design, a screen resolution report provided my with some interesting insights. For example I inferred that more than 75% of my visitors would be able to see the newly introduced 970x90px large leaderboard AdSense ads.
I built a report using HTML table that had more than two dozen columns. In fact, it was a matrix report where the number of rows and columns could grow indefinitely. The report looked perfect on the screen. However, upon printing, the browsers would print only the left portion of the table while the portion which does not fit on the page horizontally is discarded.
I was not able to find a solution so I made a half-hearted attempt at this. My "solution":
A surprise question: what is the height of a div that contains just a 40 pixel tall image?
<div><img src="100x40.png" width="100" height="40"></div>
No. It is a little more than 40 pixels:
Almost all rating systems you come across use stars to represent the numeric information visually. There are many ways to display the star rating, some involve using six or more images, while others require an image sprite that contain two, six or even more images. However, I like the star ratings used on Google search results page because it uses very simple CSS and sprite; and it can display fractional values (e.g. 3, 3.5, 3.75) quite nicely.
To create something similar, all you need is an image sprite containing two images (gray and yellow stars for example) and some CSS. Here is the 65x26px sprite used in the following example:
The HTML/CSS markup consists of two span tags:
This work is licensed under a Creative Commons Attribution 3.0 Unported License.