Using media queries we can change background images. In order to change and actual image (not background) we need javascript, so just use a div with defined size and a background image.
On small screen we can also decrease font size for large banners.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* For width larger than 800px: */ .imgDiv { width: 320px; height: 320px; background-image: url('img_largeflower.jpg'); border: 1px solid black; } /* For width 800px and smaller: */ @media only screen and (max-width: 800px) { .imgDiv { width: 320px; height: 120px; background-image: url('img_smallflowers.jpg'); } } |