You can use images as divs and use media-query to set an example if you have two images:
<style>
.banner-1 {
background: url(images/normal/banner1.jpg);
display: inline-block;
width: 978px;
height: 90px;
}
.banner-2 {
background: url(images/normal/banner2.jpg);
display: inline-block;
width: 500px;
height: 50px;
}
@media (max-width: 420px) {
.banner-1 {
background-image: url(images/celular/banner1.jpg);
width: 230px;
}
.banner-2 {
background-image: url(images/celular/banner2.jpg);
width: 100px;
height: 10px;
}
}
</style>
<div class="banner-1"></div>
<div class="banner-2"></div>
Set @media (max-width: 420px)
to what you think is appropriate for the cell phone screen, since swf
would not be able to change, but usually the swf itself can be expandable, so just add width: 100%;
to adjust to the DIV element which receives width:
and height
of the media-query for example, however I should warn you that Google Chrome and Firefox already block by default swf
files (I believe you can activate or still have the click to play , but it's something that will really only work depending on the user, flash is no longer a good way for some time)