Mindon.IDEA

Air off, Mind on ~ / Javascript+Golang, Sci, Health… /

Simple Auto-Resize Images in Web Pages

Nowdays, Mobile web needs to handle different mobile devices with different screen resolutions. Most effective way may be providing different sizes images for different screens in server.

Use this meta in your HTML header could reisze the web page to the device’s resolution.

<meta name="viewport" content="width=device-width, initial-scale=1">

How can we make the images auto-resize in web pages without a server or any javascript?

Here’s the simple HTML code:

<style type="text/css">img {display:block}</style>
<table width="100%" style="table-layout:fixed">
  <tr>
  <td width="50%"><a style="width:100%" href="#"><img width="100%" border="0"
   src="http://mindon.github.com/images/mindon.png" /></a></td>
  <td width="50%"><a style="width:100%" href="#"><img width="100%" border="0"
   src="http://mindon.github.com/images/mindon.png" /></a></td>
  </tr>
</table>

The CSS help to remove paddings around the images, and the table-layout:fixed help to make a smaller width of image than its origin width.

Comments