Be able to place an image with precision

📸 12 Images – Placing Images with Precision

1️⃣ Embedding an Image

Think of an image tag like a picture frame you hang on a wall. The <img> element tells the browser where the picture lives.

<img src="photo.jpg" alt="A sunny beach" width="400" height="300">

Key parts:

• src – the file location.
• alt – a short description for screen readers.
• width & height – set exact pixel size.

2️⃣ Controlling Size with CSS

Instead of hard‑coding pixels, you can use percentages or max-width to make images responsive.

<style>
  img.responsive { max-width: 100%; height: auto; }
</style>
<img src="logo.png" class="responsive" alt="Company logo">

Now the image will shrink on smaller screens but never grow beyond its original size.

3️⃣ Floating Images

Just like a picture on a bulletin board, you can float an image to the left or right so text wraps around it.

<img src="avatar.png" alt="User avatar" style="float:left; margin:0 10px 10px 0;">
<p>This is a paragraph of text that will wrap around the image. The image stays on the left while the text flows to the right. </p>

Use margin to create space between the image and the text.

4️⃣ Absolute & Relative Positioning

For precise placement, think of a grid on a map. You can place an image at an exact spot.

<div style="position:relative; width:600px; height:400px; border:1px solid #ccc;">
  <img src="pin.png" alt="Pin" style="position:absolute; top:120px; left:250px;">
</div>

The container is relative, so the image’s top and left are measured from the container’s top‑left corner.

5️⃣ Using Flexbox for Alignment

Flexbox is like a team of workers that automatically positions items. It’s great for centering images.

<div style="display:flex; justify-content:center; align-items:center; height:200px;">
  <img src="center.png" alt="Centered image" width="150">
</div>

All you need is display:flex and justify-content:center to center horizontally.

6️⃣ Common Pitfalls

• Forgetting alt – makes your site less accessible.
• Using too many float elements – can break layout.
• Hard‑coding pixel sizes – images may look blurry on high‑resolution screens.

7️⃣ Exam Tips Box

8️⃣ Quick Reference Table

9️⃣ Summary

Images are the visual heartbeat of a webpage. By mastering src, alt, size attributes, and CSS positioning, you can place pictures exactly where you want them. Remember:

1. Always include alt text.
2. Use responsive techniques for different devices.
3. Float for simple text wrap, absolute for exact coordinates, flexbox for centering.
4. Practice by creating a small gallery and experimenting with each method.

Good luck on your exam – you’ve got this! 🚀