Проблема с расширениями экранов

[Darth_Pandora]

Здравствуйте. В общем проблема такова, как сделать так, чтобы картинка(прилагается) адекватно адаптировалась под разные разрешения? К тому же желтая эмблема бэтмена должна быть ссылкой четко по контуру летучей мыши.
У меня есть такой вариант. Сделать разные размеры картинок и при помощи джаваскрипта в зависимости от разрешения экрана будет выдаваться кусок кода с определённым размером картинки, а на картинке будет выделена область ссылки html тэгом map.

Вроде бы все замечательно, но вопрос такой. Если скажем пользователь открыл браузер на половину, а потом вдруг надумает его развернуть на всю ширину, то картинка же сдвинется, так? Я права?
Господа, я право в замешательстве. В голову ничего не приходит, кроме как оторвать руки дизайнеру. Но это на крайний случай, если не смогу разобраться как сверстать сие творение

[Coriolan161]

Darth_Pandora,

при помощи джаваскрипта в зависимости от разрешения экрана будет выдаваться кусок кода с определённым размером картинки, а на картинке будет выделена область ссылки html тэгом map

Это можно и без js сделать с помощью @media или атрибута srcset

Я права?

Не совсем. Резиновая картинка расстянется, а не резиновая картинка с резиновыми отступами будет сдвигаться.

Ты можешь это выложить здесь или в кодепене?

[Darth_Pandora]

<div class="center"> 
    	<img src="images/batman.png"  usemap="#Map">
     <map name="Map">
      <area shape="poly" coords="613,1137,887,1136,886,1147,895,1167,909,1187,935,1198,953,1204,977,1203,994,1200,972,1344,858,1299,787,1290,731,1303,706,1199" href="#">
      <area shape="poly" coords="1172,1135,1444,1136,1359,1193,1341,1208,1332,1233,1324,1249,1323,1268,1325,1292,1329,1298,1302,1299,1280,1295,1251,1294,1231,1298,1202,1301,1170,1308,1149,1314,1128,1325,1099,1335,1173,1135" href="#">
      <area shape="poly" coords="973,1347,1018,1397,1031,1416,1060,1369,1085,1342,1102,1328,1127,1272,1140,1225,1157,1179,1162,1171,1111,1203,1080,1207,1062,1201,1055,1191,1057,1177,1057,1152,1037,1176,1016,1181,1012,1175,1008,1160,1001,1148" href="#">
    </map>
    </div>

.center img {
	border:0;
	float:right;
}

а не резиновая картинка с резиновыми отступами будет сдвигаться.

Да, я это и имела ввиду. У меня как раз фиксированная картинка, которая float: right;

Я не могу сделать её резиновой, по-тому как на больших экранах она будет уползать вправо и будет не по центру. К тому же я не придумала ничего лучше, кроме как сделать желтый значок ссылкой при помощи map.

[Darth_Pandora]

@media или атрибута srcset

Насколько я понимаю, например
@media screen and (max-width: 980px){
бла-бла-бла
}
Проканал бы если б я картинку сделала бэкграундом. Но если я поставлю её в бэкграунд я же тогда не смогу красиво очертить желтый значёк. Или смогу каким-то образом?

[Darth_Pandora]

Rise,
Ой как круто, это мне и нужно было, огромное спасибо!!