ptg16476052462 LESSON 16: Using Responsive Web Design
<title>Flexible Width Images</title>
<style>
img {
width: 100%;
height: auto;
max-width: 1920px;
}
</style>
</head><body>
<article>
<h1>Flexible Width Images</h1>
<figure>
<img src="swiss-shepherd-dog-354536_1920.jpg" alt="Swiss Shepherd Dog">
<figcaption> Image courtesy Pixabay</figcaption>
</figure>
</article>
</body>
</html>And as you can see in Figure 16.7, it fills up the screen on an iPhone in landscape mode.Output ▼
In many ways, making videos responsive is even easier than images. This is because the
HTML5 video tag allows you to embed multiple source files. Absent any other informa-
tion, the browser will use the source file that is best for it. But media queries let you pro-
vide even more information. Here is the HTML for adding a video:
<video controls>
<source src="video.mp4">
</video>FIGURE 16.7
The image fills up
the screen on an
iPhone.