This lesson is a kind of continuation of the previous one, in which we considered, now it's time to deepen your knowledge and see CSS properties Images.
Image dimensions in CSS
Let's see what's new here, I created an img class in which I set the dimensions of the image, width is the width, and height is our height, I indicated the dimensions more than the original ones so that you can clearly see how the image will change.
For clarity, I will give an example where there will be a lot of text, and you will see what indents from the image are in this example we will use the margin property which will give you a chance to evaluate its capabilities.
For clarity, I will give an example where there will be a lot of text, and you will see what indents from the image are in this example, we will use an image without setting indents so that you can clearly see the difference.
In the browser we see the following:
In this example, I made indents from the image thanks to the margin parameter, which gave us indents from all four edges of 20 pixels. Here you can do more tricky manipulation, you can set the indent from a specific edge, for example:
- margin-top - margin from the top side
- margin-right - margin from the right side
- margin-bottom - margin from the bottom side
- margin-left - margin from the left side
Accordingly, here you can adjust everything more finely, or set the indent from just one or two sides without touching the others.
In browser:
We set the frame around the image, thanks to the border parameter, first we set the width of the frame using border-width, we set it in pixels, then the style of the frame, that is, its appearance border-style, there are several values for you to choose:
And the last parameter we will adjust is the color of the border, which is set by the border-color parameter.
In the browser we see:
As you understand, we assigned the background to the body tag thanks to the tag selector, since it occupies the entire document, we can also assign it to other tags. The background parameter made the background a picture for us, the address to which we write in parentheses. You can also manipulate the background, for example:
background: url(proba.png) repeat-x;
The background will repeat only along the X axis, that is, horizontally in one line.
background: url(proba.png) repeat-y;
The background will repeat only along the Y axis, that is, vertically in one line.
background: url(proba.png) no-repeat;
The background will not repeat, but only one image will appear.
background-size: 500px 200px;
it additional parameter A that sets the image's background size, width, and height.
Image transparency with CSS
In the browser we see the following:
This property came with the advent of CSS3 and actually received quite extensive use. Implemented using the opacity parameter sets the transparency of the image, values from 0 to 1, and the second filter parameter: alpha(Opacity=50); does the same for Internet browser Explorier because older versions do not support the opacity parameter, values from 0 to 100. In the example, I specially made two images so that you can clearly see the difference.
This concludes the CSS Image Properties lesson, I hope this lesson was useful to you and inspired you to further study the language and gain new knowledge.
Publication date: 2014-04-22
Images are components of almost any site, so resizing is indispensable. There are 2 ways to resize an image: graphics editor or programmatically html code on css.
If in css code on html do not set the size of the image, then its height and width on the site will be the same in pixels as in source file. That is, you can resize an image without css and html, using only a graphical editor, and it will automatically change on the site if you do not specify its size. But there are cases when it is necessary to programmatically change the size of an image in css to html.
1. Changing the picture in the graphic editor
You can change the size of the image in any graphic editor (photoshop, gimp, xnview) and it will automatically change on the site in accordance with the original size.
Advantages of the method:
The picture is loaded faster because you do not need to download extra data (pixels), which will then be compressed programmatically.
Minuses:
Graphic editors poorly compress images less than 200 pixels in width and height.
Whenever possible and appropriate, try to resize it in a graphics editor so that pictures load faster than when resizing them programmatically. The difference in speed can be tens of times.
2. Changing the image in the css code on the site
Pros:
Faster and more convenient to set the size. This method image reduction is usually used for convenience. For example, when one picture can have many different sizes, it is often more convenient to change the values of the same one programmatically than to upload all formats of one image edited in a graphics editor.
Qualitatively compressed small pictures, less than 200 pixels in height or width, unlike graphic editors. If you want the image size on the site to be less than 200px, it's better that the original size is 30-50%(260-300px) larger to save good quality when decreasing.
At the same time, the difference in site loading speed will not be felt, because small images take up very little space and if you increase their size by 30%, you will not notice any changes. But notice the difference in quality.
Minuses:
Programmatically compressed pictures take longer to load because resizing occurs only after downloading the original version. Therefore, if the image size is more than 200 pixels in width or height, then it is better to compress it in a graphics editor so that the site works faster.
how to resize html image using css
To resize an image in html css properties are used width(width) and height(height) inside the style attribute. You can write only width or height , and the remaining unspecified value will automatically change while maintaining the aspect ratio of the picture. For example, by specifying only the width of an image using width, its height will change automatically, keeping the aspect ratio. And vice versa, when specifying only the height (height), its width will also automatically change, preserving the aspect ratio of the image.
Code example without specifying image dimensions
Result in browser
Page code
Example code with image resizing in .css
Result in browser
Page code
style="width:150px; ">
Both of the examples above use the same image with a size of 300x184px (width and height). In 1 example, the image was displayed in the browser without changes with the original size of 300x184px, since the width and height were not specified in css. And in the 2nd example, the picture was displayed in the browser reduced by 2 times, since the width was 150px, the height accordingly automatically changed to 92 px. As you can see, the height property may not be specified at all, since it automatically changes in proportion to the width.
If you provide both options: width(width), height(height) and they will not correspond to the proportions, then the picture will have exactly that size, but in a compressed or stretched form, depending on the values.
Why is it undesirable to enlarge pictures
Important: Increasing the size of the image is accompanied by a loss of quality. When changing in any way, it is important to set the values less than in the original image, that is, only reduce.
If you set the pixel size to be larger than the original image, the quality will deteriorate. And the quality loss will be clearly visible, because the computer cannot add new pixels, it can only increase the size of existing ones. The larger the image magnification from the original value, the worse its quality and the more clearly visible square pixels.
To resize a picture using HTML for a tag attributes width (width) and height (height) are provided. Pixels are used as the value, and the arguments must match the physical dimensions of the image. For example, in fig. 10.6 shows an image that has dimensions of 100x111 pixels.
Rice. 10.6. original size picture
Accordingly, the HTML code for placing this figure is shown in example 10.4.
Example 10.4. Drawing dimensions
If the dimensions of the image are specified explicitly, then the browser uses them to display the empty area corresponding to the image during the loading of the document (Fig. 10.7). Otherwise, the browser waits for the image to fully load before changing the width and height of the image (Figure 10.8). In this case, text reformatting may occur, since initially the size of the picture is not known and it is automatically set to small.
Rice. 10.7. The size of the image is not specified and it has not yet loaded
Rice. 10.8. Image uploaded, text reformatted
The width and height of the image can be changed both up and down. However, this does not affect the download speed of the picture in any way, since the file size remains unchanged. Therefore, reduce the image with caution, because. this may cause confusion among readers, why such a small drawing takes so long to load. But increasing the size leads to the opposite effect - the size of the image is large, but the file is loaded faster relative to the image of the same size.
On fig. 10.9 shows the same image as shown in fig. 10.6, but doubled in width and height.
Rice. 10.9. View of the image enlarged in the browser
The code for such a drawing will remain almost unchanged and is shown in Example 10.5.
Example 10.5. Resizing a picture
Such resizing is called resampling, and the browser algorithm is inferior in its capabilities to graphic editors. Therefore, it is necessary to increase the image in this way only in special cases, otherwise the image quality deteriorates too much. It is better to use some kind of graphics program. The exception is drawings containing rectangular areas. On fig. Figure 10.10 shows a pattern file that takes 54 bytes and has an original size of 8 by 8 pixels, scaled up to 150 pixels.
Rice. 10.10. Enlarged Image
Browsers use two algorithms for resampling - bicubic (gives smooth edges and a smooth tonal range of colors) and closest points (preserves the original set of colors and sharp edges). Recent versions of browsers use a bicubic algorithm, while older browsers, on the contrary, use a nearest point algorithm.
Instruction
First, try to find the picture using search engines. Enter a query, and then select the search settings tab. Google, for example, has a “Search Tools” button, while Yandex has an icon with sliders. After you need to select the item "Size" and specify the exact values. Or, for example, if you need a photo with a good resolution, select "Large".
If there is no picture with the desired size, then it can be adjusted to the frame yourself. There are ways. The first is that you first create a document with the desired size, and then change the picture. The second is the opposite - open the picture and change the size. There is essentially no difference: it all depends on your preferences and goals. The examples will be considered in Adobe Photoshop, but you can use other graphic editors.
First way. Click "File" - "Create ..." or the key combination Ctrl + N. A window with settings will appear in front of you. Specify the width, height and required color resolution parameters there. Then open the image you like in the browser, right-click and select "Copy Image". Then return to the program and press the combination Ctrl + V.
The picture will appear in the graphics editor window. Then click "Editing" - "Free Transform" or the combination Ctrl + T. Key points will appear, with the help of which you can fit the image to the size of the working window. As soon as you get the desired result (by the way, you can go beyond the boundaries of the working area), click "File" - "Save as ..." or the key combination Ctrl + S.
The second way. You need to first go to the computer, then click "File" - "Open ..." (or the combination Ctrl + O) and select the desired image. Then select "Image" - "Image Size ..." or press Alt + Ctrl + I. Uncheck "Keep aspect ratio" and select the desired size. Then press the OK key.
The photo will be resized according to the specified size in centimeters (millimeters, inches), as well as the specified size in DPI, according to paper printing standards. Dimensions in cm, mm and inches can be specified with an accuracy of thousandths, for example, instead of the 15x10 format, you can set 15.201x10.203 cm.
Table with standard photo sizes in a vertical (portrait) position:
| Photo format in centimeters (cm) | Size in millimeters (mm) | Size in pixels (for print 300dpi) |
Aspect Ratio (in landscape orientation) |
| 3x4 (after manual cutting) | 30x40 | 354x472 | 4:3 (1.33) |
| 3.5x4.5 (after manual cutting) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Standard paper sheet size A4 format- 21x29.7 cm or 2480x3508 pixels at 300 dpi. Dimensions of other sheet formats can be seen on the Wikipedia page, but just do not forget that the dimensions are listed there in millimeters and inches, i.e. in the settings on this page, you need to select the appropriate value.
If you need to resize a photo without taking into account DPI (dots per inch), that is, only respecting the proportions of the specified format, then for this you need to set the "Size in DPI" parameter to "0" in the settings.
The original image is not changed in any way. You will be given another processed picture.