Как сделать масштабирование в html
Добавил пользователь Дмитрий К. Обновлено: 04.10.2024
Такое форматирование позволяет предотвратить превышение любым из имеющихся на странице img элементов ширины его контейнера. И в ситуации, когда контейнер становится ýже содержащегося в нем изображения, элемент изображение пропорционально уменьшает свою ширину, для того, чтобы быть в рамках контейнера. Все очень просто, не правда ли, однако, есть нюансы.
Если в разметке у элемента изображения имеются контентные атрибуты размерностей ( width и height ) и вы, используя приведенный выше способ, средствами CSS переопределяете его ширину, высота изображения останется прежней, поскольку ее значение определяется с помощью контентного атрибута элемента. А это, естественно, приведет к искажению изображения.
Простейший способ предотвращения подобной проблемы заключается в исключении атрибутов width и height из разметки элемента. Однако, именно такой способ определения размеров изображения, с помощью контентных атрибутов, наиболее предпочтителен с точки зрения производительности ресурса, поскольку это позволяет снизить время, требуемое браузеру для отображения изображения. Более детально данный вопрос раскрывается в рекомендациях Google по определению размеров изображения. Каких либо жестких рекомендаций по размещению этих данных нет, они могут содержаться в HTML разметке и/или определяться с помощью CSS кода. Я, все же, склоняюсь к мнению, что как с практической, так и с логической точки зрения, необходимо использовать HTML атрибуты.
Итак, мы хотим указывать требуемые размеры наших изображений и в тоже время получить возможность их пропорционального масштабирования. К счастью, такой способ есть, более того, он невероятно прост — необходимо добавить CSS декларацию, переопределяющую явно указанное значение высоты контентным атрибутом в HTML . То есть совместно с max-width нужно использовать height:auto :
Теперь масштабирование изображений будет происходить без искажений. Наглядный пример пропорционального масштабирования содержащих атрибуты размерностей изображений можно увидеть на этой демо-странице.
Поддержка браузерами.
Даже в нашем, казалось бы простейшем случае, существует пару различий в реализации некоторыми браузерами, на которые необходимо обратить внимание, по крайней мере, если вы заинтересованы в предоставлении гибко изменяющейся по ширине компоновки в IE8 и ниже.
IE7 , кстати, выполняет пропорциональное масштабирование изображения независимо от того, указаны ли атрибуты размерностей в разметке и даже в том случае, если вы не используете декларацию height:auto .
Что касается IE8 , то для корректного масштабирования изображений, вам, как ни странно, потребуется помимо переопределения установленной в разметке высоты, переопределить и значение ширины. К великой радости, наличие дополнительной декларации width:auto не вызывает никаких проблем в других браузерах. Итак, для пропорционального масштабирования изображений в IE8 вам необходимо использовать следующее правило:
Используя Firefox, вы можете увеличить всю веб-страницу, просто нажав CTRL + . Это пропорционально увеличивает всю веб-страницу (шрифты, изображения и т. Д.).
Как я могу повторить ту же функциональность, используя просто CSS?
Есть ли что-то подобное page-size: 150% (что увеличило бы целые части страницы на x%?)
Функция масштабирования страницы в Firefox появляется в каждом современном браузере - копирование кажется довольно бессмысленным.
Я согласен с Дэвидом. Кажется бессмысленным повторять это, так как браузеры в наши дни имеют встроенную функцию .
это на самом деле было бы невероятно полезной функцией для мобильных устройств. Многие телефоны в настоящее время увеличивают свой PPI без учета разницы (за исключением iPhone4, конечно).
Это не копирует это. Это может быть полезно для чего-то вроде предварительного просмотра страницы / элемента во встроенном div.
Возможно, вы сможете использовать zoom свойство CSS - поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.
Firefox - единственный крупный браузер, который не поддерживает Zoom ( элемент bugzilla здесь ), но вы можете использовать свойство "proprietary" -moz-transform в Firefox 3.5 .
Таким образом, вы можете использовать:
Дэвид, эта ссылка очень устарела - взгляни на версии браузера, которые она перечисляет. CSS Zoom поддерживается во всех основных браузерах, кроме Firefox. И он не более проприетарный, чем любое из расширений -moz- CSS.
Я тестировал Opera 10b2, и она, кажется, не поддерживает ее. Firefox по ночам ведет себя странно (увеличенный фрагмент исчезает). IE5 / 6 глючит. Прекрасно работает только в WebKit.
Это довольно поздний ответ, но вы можете использовать
чтобы увеличить страницу на 110%. Хотя zoom стиль есть, Firefox все еще не поддерживает его, к сожалению.
Кроме того, это немного отличается от вашего зума. css transform Работает как масштабирование изображения, так что это увеличит вашу страницу , но не причиной оплавления и т.д.
Редактировать обновленный источник трансформации.
Спасибо за это, но вам нужно несколько точек с запятой между объявлениями. Кроме того, когда я попытался это сделать, страница сместилась влево за левое поле, так что левая часть страницы перестала быть видимой. Добавление различных соответствующих объявлений ". transform-origin: 0 0" исправило это.
Я согласен с @Dave Burton: использование transform-origin: 0 0; делает то, что я хочу. Например, чтобы увеличить страницу до 150%: transform: scale(1.5); transform-origin: 0 0; . Я считаю, что хороший ответ @kumar_harsh должен быть исправлен.
@KaiCarver, если вы используете этот метод, это всегда приведет к отсечению. Неважно, какую точку вы используете transform-origin . То, что я написал, является лишь одним примером того, какую ценность использовать. Вы, конечно, можете свободно использовать transform-origin: 0 0 его, если он подходит для вашего сценария использования (или если вас не интересует, что находится в правом нижнем углу)
@AngularM Вы можете поделиться фрагментом кода, чтобы показать поведение? Я уверен, что есть другая причина для этого.
Если ваш CSS построен полностью вокруг ex или em единиц, то это может быть возможно и осуществимо. Вам просто нужно объявить font-size: 150% в своем стиле для body или html . Это должно привести к пропорциональному масштабированию любой другой длины. Вы не можете масштабировать изображения таким образом, если только у них тоже нет стиля.
Но в любом случае это очень большая цифра на большинстве сайтов.
Это только изменит размер моих шрифтов. CTRL + также расширяет фиксированную ширину, высоту и размеры изображения.
Я знаю, но это так близко, как вы можете получить с чистым CSS. Также меняются не только ваши шрифты, но и все, где размеры указаны как кратные размеру шрифта. То есть все, что вы использовали % , em или ex единицы.
Это просто не правильно. Я протестировал решение, которое я перечислил ниже (свойства zoom + -moz-transform), и оно работает на FF3.5, IE6 +, Safari и Opera. Он масштабирует изображения и текст. Вы можете масштабировать страницы в CSS.
Как говорит Йоханнес - недостаточно представителя, чтобы комментировать свой ответ - вы действительно можете сделать это, если размеры всех элементов указаны как кратные размеру шрифта. Это означает, что все, где вы использовали%, em или ex единицы". Хотя я думаю, что% основаны на содержании элемента, а не на размере шрифта.
И вы обычно не используете эти относительные единицы для изображений, поскольку они состоят из пикселей, но есть хитрость, которая делает это намного более практичным.
Если вы определите, body; то 1em будет эквивалентно 10px. Насколько я знаю, это работает во всех основных браузерах.
Затем вы можете указать свои (например) квадратные изображения размером 100px width: 10em; height: 10em; и, предполагая, что масштабирование Firefox по умолчанию установлено, изображения будут иметь их естественный размер.
Сделать body; и все - включая изображения - будет двойной оригинальный размер.
Я не понимаю, если я скажу body
Я думаю, что вы не поняли. ты не сделал бы и то и другое одновременно. 62,5 x2 = 125 . чтобы показать, как вы можете масштабировать вещи, регулируя значение.
Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML.
Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер - это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.
Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для перехода на различные страницы. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.
Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.
Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer , Mozilla Firefox , Google Chrome , Safari , Opera .
Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.
Масштаб страниц в браузере
Для удобства просмотра некоторых страниц в браузере (или картинок), их масштаб можно увеличивать или уменьшать.
Чтобы уменьшить масштаб страницы надо зажать клавишу Ctrl на клавиатуре, и нажать клавишу - столько раз, пока веб-страница не уменьшиться до нужного вам размера ( Ctrl + ' - '). Чтобы увеличить масштаб страницы надо зажать клавишу Ctrl на клавиатуре, и нажать клавишу + столько раз, пока веб-страница не увеличится до нужного вам размера ( Ctrl + ' + '). Вместо нажатия клавиш - и + можно использовать колёсико мышки, прокручивая его от себя или на себя.
Примечание: для возврата масштаба страницы к исходному значению (100%), нажмите Ctrl + 0 .
Други умоляю помогите.
Я уже вторую неделю мозк ломаю - ничего не смысля в СSS и HTML, но понял вот что:
1) У меня на странице все картинки и поля расположены абсолютно и в пикселях;
2) MediaQures не подходит - приходиться все переписывать;
3) Сайт моделировал в WebPageMaker
Неужели нельзя вставить где-то код (подозреваю, что на JAVA), чтобы при различных разрешениях браузера страница масштабировалась полностью (все сразу) так как если бы мы зажали сtrl + крутанули колесико в зависимости от разрешения браузера. Или другими словами если мы тянем за угол страницы уменьшая ее размер, то все содержимое пропорционально уменьшается.
Поставьте на путь истинный слепого чайника!
нет таких решений волшебных. А резиновая верстка, или например адаптивный дизайн - вещь не такая простая и однозначно требует полную переверстку а чаще и редизайна сайта
Этого не может быть! Неужели нельзя отследить какое разрешение браузера и выставить соответствующий масштаб средствами браузера - это должно быть.
Аналогию проведу с макросами экселя и верда - записать это действие в макрос (ctrl+колесико) и получить код, а дальше прописать условие. Не может быть, что нельзя управлять браузерным масштабированием. Ведь не требуется, чтобы блок под блок заходил, а просто как отдаляется и приближается.
вернет ширину окна в пикселях, развлекайтесь =)
но, делается это отнюдь не так, а через грамотную верстку, о чем ADSoft и поведал ранее.
Вот как получить размер окна:
Если не понимаете - лучше не применять. Трабла не с синтаксисом а пониманием ))))
Изучайте HTML, CSS, JS и придет вам и понимание и синтаксис (который кстати в интернете посмотреть - раз плюнуть)
Читайте также: