cuyofiveg

Добрый день. Помогите, пожалуйста, разобраться, никак не могу сделать так, чтобы на маленьких экранах кнопки становились меньше. Конструкция кнопок выглядит таким вот образом. Как прописать при: @media screen and (max-width: 700px) and (min-width: 300px){ их уменьшение? Кнопки даже не думают уменьшаться, просто переносятся в строку, а размер картинок не меняется. Пробовал уже всякое найденное в сети, но ни в какую не меняется размер. Нужно сделать их адаптивными. Просто картинку адаптивной могу сделать, картинку в виде ссылки могу сделать, но нужно чтобы при наведении картинка менялась, а из-за этого она становится тегом "<a href=...", а в нём картинка указывается через "background: url", а к нему не достучаться. Пробовал даже такие штуки, не помогает... background: url(background.png) no-repeat; -webkit-background-size: 100%; -o-background-size: 100%; -moz-background-size: 100%; -ms-background-size: 100%; -khtml-background-size: 100%; background-size: 100%; Структура кнопок примерно такая: <style> a.menu1 { display: inline-block; background: url(images/menu1.png); width: 100px; height: 60px; } a.menu1:hover { background: url(images/menu2.png); transition: all 900ms ease-out; } </style> <table> <tr> <td class="menu"> <a href="#" class="menu1"> </a> </td> </tr> </table>