Skip to main content

PNG that works

Performance Calendar: Performance Calendar » PNG that works (stoyan)

Once you sprite your images, the next step is to compress them as much as possible. PNG is a great format for this, but... Yes, it does! No, it doesn't! Which PNG? PNG supports various combinations of color depth, transparency and color correction.
bookmarks css


CSS Tricks

Just found two neat css tricks:
- Force image resize and keep aspect ratio [1]
- Absolute horizontal and vertical centering [2]

Force image resize and keep aspect ratio

Sometime we want to scale images to fit them into avaiable space, e.g. a photo in friendica's stream. We can easly set a maximum width and the image will scale correctly:
.image { max-width: 100px; }
If image width is > 100px, the browser will scale the width to 100px and the height to whatever is in relation to image ratio.
So, if the image is 400x200, the browser will scale it to 100x50.


What if the image is 400x1200?
The browser will do his job and will show it ad 100x600. that could be quite tall..

The first thing we try is to add max-height:.image { max-width: 100px; max-height:100px... show more
blog css
This entry was edited (6 years ago)

It works also on IE10! Pure magic!