Styling my images

How do I make images on my website 2 different sizes?

1 Like

there are several ways to accomplish this, you could add a style attribute to the image:

<img src="#" style="width: 100px;">

the other image, you would give a different width of course

better would be to use css, for this you can use a variety of selectors to distinguish between the images but this depends on your html code as well, its always easy to use ids or classes of course.

3 Likes

Does this go into the CSS or HTML portion of my code?

1 Like

The <img> tag is an HTML tag, so it goes in HTML.

However, that’s not really the point @stetim94 was trying to make…

He was saying that it would be better for you to use CSS to style the image, as opposed to HTML. Allow me to show you an example of how you would do this…

Given the following HTML…

<img src="#">

Your CSS would look like:

img {
    width: 100px;
}

Please note that the above method will cause the size change to apply to all images. In order to avoid this, it is highly recommended that you assign a class to your images if you want them to be different sizes.

2 Likes

the style attribute is perfectly legit:

Css is better of course, but so little details where given in the question, i wasn’t sure if the learner already knew css

2 Likes

using width as attribute it outdated, true, but style attribute isn’t. Its just inline css

2 Likes

I know… I literally just got done reading the docs before you made that post… :laughing:

:thinking: Are you sure you don’t have ESP?

1 Like