As in html to reduce the picture

In hypertext markup language (HTML) to display an image on a page, it uses the special command "tag". This tag referred to as img and contains a variable set of "attributes". Using attributes you can define all aspects of a picture in the page of hypertext, including its size. However, this is not the only way of solving the problem is to reduce the size of the image and using cascading style sheets (CSS).

Instruction

Put in a tag which outputs a desired image, the height and width attributes. The first one set the size of the image vertically and the other horizontally. Both numbers are set in pixels, but the designation of units - px - specify there. Computing the desired values for these attributes, pay attention to a proportional reduction of the picture, otherwise it will be displayed in a distorted form. For example, put it in a page, reduced to half a picture from a file name SomePic.jpg source whose dimensions are 500 by 300 pixel, you can tag so:<img src="SomePic.jpg" height="150" width="250" />

You can ask a proportional reduction of the original image size in percent. To do this, use only the height attribute without specifying a width, and after you specify determines the size of the number and add a percent sign. For example, to achieve the same effect as in the example from the previous step, you can tag written like this:<img src="SomePic.jpg" height="50%" />

If you want to set the image reduction by using style definitions, use the same tag name is img, and attributes - width and height. In this case, the unit of measurement - px, pt or % - it is necessary to specify always. To set the halving of the sizes of all images of the page put in the description block of styles:img {height: 50%;}If you need to reduce the size of only one image, add to it an optional id attribute and assign it a unique image of this page - for example, PicOne:<img src="SomePic.jpg" id="PicOne" />It's a value add and in record style, separated "" # from the name tag. Description of style completely in this case may look like this:<style type="text/css">img#OnePic{height: 50%;}

Is the advice useful?