Css запретить перенос изображения

Запретить перенос изображений при изменении размера браузера

На главной странице у меня есть изображение, которое перемещается или изменяется при изменении размера браузера. Я просто хочу изменить его, чтобы изображение обрезалось справа, если браузер маленький.

Я попробовал несколько вещей безрезультатно:

1. Удалить поплавок на div ID right и относительное расположение на right-image
2. Попробуйте min-width для div id right
3. Приведите высоту, ширину в процентах
4. Добавлены настройки окна просмотра.

В шаблоне изображение размещено вне main лайк:

  
 
Tag Line
 
Some blurb
 
SignUp! button
 
 
   

body < margin: 0 auto; height: auto; overflow-x: hidden; >#main < float: center; width: 950px; overflow: visible; height: auto; margin: 0 auto; >#left < float: left; width: 500px; display: inline-block; >#left-title < font-size: 3.4em; margin: 25px 0px 20px 15px; >#left-blurb < margin: 0px 20px 10px 15px; >#left-signup < margin: 0px 0px 0px 90px; >#right < float: right; width: 600px; height: 400px; margin-top: -10px; display: inline-block; >#right-image

Я думаю, что это CSS, который имеет отношение к вопросу. Но если этого недостаточно, я говорю о веб-сайте https://www.mathnuggets.com/

Буду признателен за любые идеи.

2 ответа

Вы можете добавить медиазапрос, чтобы просто удалить его из документа, если размер вашего документа меньше определенного количества пикселей.

@media screen and (max-width:480px) < #right-image< display: none; >> 

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

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

Источник

Отключить перетаскивание изображения со страницы HTML

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

@AgentConundrum — для меня нет проблем, если пользователь сохраняет и делает все, что хочет. Мое единственное требование — не перетаскивать это изображение.

22 ответа

Я попробовал себя и обнаружил, что это работает.

Я уверен, что это отключает перетаскивание всех изображений. Не уверен, что это влияет на что-то еще.

Ах! Вы должны были упомянуть, что используете jQuery / могли бы использовать jQuery. +1 за использование jQuery.

ты в порядке! Нет, насколько я знаю, то, что вы здесь делаете, не должно иметь никаких негативных последствий ни для чего другого.

$(‘img’).mousedown(false) короче. И @SeinopSys Какой браузер вы используете? Это все еще работает по крайней мере для меня (FF v59.0.2). Не проверял с другими браузерами, но здесь скрипка для теста.

Вам может понравиться это.

document.getElementById('my-image').ondragstart = function() < return false; >; 

Кажется, вы используете jQuery.

$('img').on('dragstart', function(event) < event.preventDefault(); >); 

@alex — цель не перетаскивать изображение, не красть изображение. Цель совершенно другая. Я делаю этот образ как сортируемый и сбрасываемый. Так что это занимает много времени, чтобы объяснить это.

@alex — Ты слишком сожалеешь об этом. Комментарии стали неактуальными после большого количества правок и после того, как оказалось, что мой ответ не был сорван.

@rybo111 rybo111 Возможно, вы могли бы, но я бы избегал этого, так как a) AFAIK, это не задокументировано jQuery и b) путаница с тем, что он на самом деле будет делать.

@AdamMerrifield Ну вот и все. Стоит отметить, что это также предотвратит распространение, что может быть проблемой.

Решение только для CSS: используйте pointer-events: none

-1! Это следует использовать для предотвращения ВСЕХ событий понтера (включая перетаскивание, например, когда вы хотите загрузить изображение). Используйте решение javascript еще!

Для моей проблемы (я не хотел никакого взаимодействия вообще в div) это работало для современных браузеров

просто добавьте draggable = «false» в ваш тег изображения:

IE8 и ниже не поддерживают.

Я использую Magento, так что мой div вроде:

window.ondragstart = function()

+1 Не понимаю подвохов. Это не окончательное решение, оно предотвращает перетаскивание всего, а не только специального изображения. Но это показывает правильное направление (и я думаю, что это был первый ответ, который делает это)

@DrMolle Возможно, это было в ответ на (после удаления) комментарии, оставленные Стивом на мой ответ .

Помните, что иногда люди будут перетаскивать ссылку на панель закладок — это решение устранит эту возможность.

Простейшее решение для кросс-браузера

заключается в том, что он не работает в firefox

Я использовал его на своем веб-сайте в http://www.namdevmatrimony.in/ Он работает как волшебство. )

Смотрите ответ; в Chrome и Safari вы можете использовать следующий стиль, чтобы отключить перетаскивание по умолчанию:

-webkit-user-drag: auto | element | none; 

Вы можете попробовать user-select для Firefox и IE (10 +):

-moz-user-select: none | text | all | element -ms-user-select: none | text | all | element 

Вы можете добавить следующее к каждому изображению, которое вы не хотите перетаскивать (внутри тега img ):

img src="https://overcoder.net/q/27152/Koala.jpg" onmousedown="return false;" 

Этот код делает именно то, что вы хотите. Это предотвращает перетаскивание изображения, позволяя любым другим действиям, зависящим от события.

Непосредственно используйте это: ondragstart=»return false;» в теге изображения.

Если у вас несколько изображений, завернутых в тег :

Работает во всех основных браузерах.

Так как мои изображения были созданы с использованием ajax и поэтому недоступны в windows.load.

Таким образом, я могу контролировать, какой раздел блокирует поведение, он использует только одно связывание событий и работает для будущих созданных изображений ajax без необходимости делать что-либо.

С новой привязкой jQuery on :

$(‘#page’).on(‘dragstart’, ‘img’, function(event) < event.preventDefault(); >); (спасибо @ialphan)

Это правильное решение. Одна привязка события для неограниченного количества элементов img , настоящего или будущего. Наименее интенсивный, самый крепкий.

Задайте следующие свойства CSS для изображения:

user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; 

Отличное решение, имело одну небольшую проблему с конфликтами, Если кто-то другой конфликтует с другой js-библиотекой, просто не разрешайте конфликт таким образом.

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) < event.preventDefault(); >); 

Надеюсь, это поможет кому-то.

Ну, я не знаю, помогли ли все ответы здесь или нет, но вот простой встроенный CSS-трюк, который определенно поможет вам отключить перетаскивание и выбор текстов на странице HTML.

В тэге добавьте ondragstart=»return false» . Это отключит перетаскивание изображений. Но если вы также хотите отключить выбор текста, добавьте onselectstart=»return false» .

Вы можете считать мое решение лучшим. Большинство ответов несовместимы со старыми браузерами, такими как IE8, поскольку e.preventDefault() не поддерживается, а также ondragstart. Чтобы сделать это кросс-браузер совместимым, вам нужно заблокировать событие mousemove для этого изображения. См. Пример ниже:

$("#my_image").mousemove( function(e) < return false >); // fix for IE $("#my_image").attr("draggable", false); // disable dragging from attribute 

var my_image = document.getElementById("my_image"); my_image.setAttribute("draggable", false); if (my_image.addEventListener) < my_image.addEventListener("mousemove", function(e) < return false >); > else if (my_image.attachEvent) < my_image.attachEvent("onmousemove", function(e) < return false >); > 

тестировался и работал даже для IE8

Источник

Запрещение перетаскивания изображения зажатием мыши в браузере

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Обсуждения

http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы

margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах

Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.

тогда как выше предложили пустую строку

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2		row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

или если подсветка ячеек не обязательна, то можно так

row 1 cell 1	row 1 cell 2	row 1 cell 3 must contain several lines
row 2 cell 1	row 2 cell 2
row 3 cell 1	row 3 cell 2
row 4 cell 1	row 4 cell 2
row 5 cell 1	row 5 cell 2	row 5 cell 3
row 6 cell 1	row 6 cell 2	row 5 cell 3

Источник

Русские Блоги

HTML запрещает перетаскивание изображений на новой странице скачать

body ondragstart="window.event.returnValue=false;return false;" oncontextmenu="window.event.returnValue=false;return false;" onselectstart="event.returnValue=false;return false;"> 

Интеллектуальная рекомендация

Java использует селен и браузер для управления автоматической операцией управления веб -страницей

Друзья позволяют помогать сделать бронирование для памятных монет, но количество памятных монет для назначений ограничено, и большую часть времени потрачено впустую, чтобы заполнить личную информацию .

Однопроизводительная линейная линейная конструкция линии линии

Однопроизводительная линейная линейная конструкция линии линии Беспроводной интеллектуальный коммутатор, сигнал управления передается через радиочастотный сигнал (чип). Умный коммутатор должен иметь в.

Вставка и удаление динамически связанного списка

В этой статье в основном рассказывается о коде вставки и удаления динамически связанного списка, а затем объясняется это непосредственно в коде ^ ^ Это не картинка, скажи снова j8 Код выше, как показа.

Основная концепция Введение анализа времени

Основная концепция анализа времени, которую мы хотим сегодня представитьasynchronous logicСущность Китайское имя асинхронная логика времени. Это самая основная концепция в дизайне цифровых схем. Харак.

Источник