My 8th grade students are having problems with the size of the photos on their pages. I am just as new to CSD as they are, and I haven’t been able to help them. For some of my kids, their photos are HUGE, and for other kids, their photos don’t even show up. Any ideas on what could be happening here?
@cresweber, If there are no styles applied to the photos, they will load at whatever their native size is. This can be changed by editing them in an application such as photoshop or you can use styles to specify the size they appear as when they load. Below is an example of “inline styling” you can put right in the html or in a few lessons, when students learn css, there is a better way.
<img src="images/cat.jpg" width="200px" alt="picture of cat">
Size can be in pixels (px) or expressed as a percentage of the element it sits in (ie. 50%).
CSS option placed in style.css file.
img {
width: 50%;
}
If you want more information on styling images, here’s a good link at W3Schools. https://www.w3schools.com/css/css3_images.asp
If the images aren’t showing up, it’s usually because of a misspelled image name or if the “path” isn’t correct. For example, in the code above, the “images/” part of the code indicates the image is found in the website’s “images” folder.
If you have one or more that are confusing, feel free to have the student click “share” and then you can post their URL here and we are happy to look at it.
Best of luck! Let us know if you need any clarification.
Mike
1 Like
Thank you! I can’t wait to share this info with my kids… we’ve all gotten very frustrated trying to figure this out! Thanks again for your help!
Cecilia F. Resweber
Computer Science Teacher
St. John Paul II Catholic School
1 Like