Learning where to input sizes in picture code

1778255827

To specify image sizes, you just use the width and height properties in CSS! You can either do it directly within the image tag:

< img src="url" style="width: 10px; height: 10px;">

Or, if you want to set multiple images to the same size, you can make a separate class for it, so the following would go between < style> tags (note you don't have to call it imgClass, you can pick whatever name you want):

.imgClass {
width: 10px;
height: 10px;
}

...and the following would be your image code:

< img src="url" class="imgClass">

If you want to keep the original aspect ratio, you only need to define one of the properties, so if you specifically want an image to be 100px wide but not be squashed or stretched, you can just use "width: 100px;" and omit the height property entirely. The same works if you only want the height defined and want the same aspect ratio, just use the height property and ignore width :)

There are two main units you can use to define width or height: pixels (px), or percentages (%). If you set width to "width: 100px;" it'll be 100 pixels wide. With percentages, however, it scales depending on the dimensions of the screen used to view the page, so if you set your image to "width: 100%;" it'll fill the entire width of the page, regardless of how large your screen is. There are other measurements like pt, but I don't see them used much. pt is slightly bigger than px (100px would be a smaller amount of pt although I'm not sure of the exact conversion), so if you don't want your size numbers to be too ridiculously large you could use that, but... eh, pixels are fine. Of course, it's ultimately up to you.

Hope this helps!

please don't turn into actual code SpaceHey please don't turn into actual code SpaceHey please please please

Report Comment