Так что я знаю, как изменить css в зависимости от разрешения через javascript.
Как можно «обрезать» изображение в зависимости от разрешения экрана?
Javascript определяет разрешение экрана, изменяет css, обрезает изображения соответственно
Ответы (1)
Ну, вы можете получить информацию об экране с window.screen - хотя лично я бы рекомендовал просто найти насколько велико текущее окно, единственная причина этого не делать, если вы собираетесь изменить размер окна, а это очень не одобряется.
Как только вы узнаете размеры и то, насколько большими вам нужно сделать ваши изображения, я считаю, что изображения легче всего обрезать, поместив их в содержащий DIV с набором overflow: hidden;. Затем вы можете изменить размер содержащего DIV до требуемого размера и установить атрибуты CSS top и left изображения на отрицательные значения координаты, которую вы хотите для верхнего левого видимого угла.
<div class="crop-container" style="width: 200px; height: 200px; overflow: hidden;">
<img src="something-400x400.jpg" style="top: -100px; left: -100px;" width="400" height="400" alt="Something" />
</div>
person
Orbling
schedule
25.11.2010
Да, я уже думал об этом методе, мне было любопытно узнать, есть ли решение для javascript, спасибо за ваш вклад. Кстати, разве вы не установили бы для div значение overflow:hidden, и вы бы изменили размер этого div в зависимости от разрешения экрана, а затем расположили изображение внутри соответствующим образом, а не наоборот?
- person Daryl; 25.11.2010
@ Дэрил Да, извините, я торопился, так как уже очень поздно, и поставил верхний / левый неправильный бит, сейчас исправлено. Я предполагал, что вы собираетесь сделать это с помощью JavaScript, я просто показывал HTML-конструкции, которыми вам нужно будет манипулировать.
- person Orbling; 25.11.2010
Ах нет проблем. Это, вероятно, метод, которого я собираюсь придерживаться в любом случае. Иначе я просто доставлю себе ненужные хлопоты, ха-ха. Поспи.
- person Daryl; 25.11.2010
