Как увеличить размер изображения до 100% ширины экрана, но только если <1024 px - PullRequest
2 голосов
/ 12 августа 2011

Я бы хотел разместить изображение на сайте. Мне бы хотелось, чтобы это было не фоновое изображение, а обычное изображение, которое я позже смогу использовать для наведения и «наведение на какую-то область, что-то меняется на экране» * * * * * * * * * * Что я хотел бы сделать, это сделать это изображение на 100% шириной области просмотра, но только если экран меньше 1024 пикселей. Если экран больше, я хочу, чтобы изображение было ровно 1024 пикселей в ширину.

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

Под интерактивными приемами я подразумеваю, что если указатель мыши находится над областью многоугольника, то div или изображение изменяются или появляются где-то. Можете ли вы указать мне, где читать об этой технике, и как она называется?

У меня нет опыта работы с JavaScript, я использовал только готовые плагины JS, но если вы скажете, что для этой проблемы я действительно должен использовать JS, то у меня нет проблем с этим.

Ответы [ 2 ]

5 голосов
/ 12 августа 2011

используйте CSS max-width https://developer.mozilla.org/en/CSS/max-width

HTML:

<img src="flower.jpg" class="no-bigger-than-1024"/>

CSS:

.no-bigger-than-1024{width:100%; max-width:1024px;}
1 голос
/ 12 августа 2011
img
{
    max-width:1024px;
    width:100%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...