Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.82/11: Рейтинг темы: голосов - 11, средняя оценка - 4.82
0 / 0 / 0
Регистрация: 18.10.2015
Сообщений: 22
1

Рамка вокруг фото в Chrome

28.04.2016, 23:49. Просмотров 2107. Ответов 15
Метки нет (Все метки)

Добрый вечер всем. Может кто сталкивался. Вывожу картинку на страницу в теге <img /> данный тег в блоке <div>.
Пример вывода картинки :
HTML5
1
<img style="background-image: url(page4_img1_big.jpg);" class="img-responsive">
Картинка выводится всё отлично, но в замечательном Chrome появляется рамка вокруг данной картинки, а в Firefox данной рамки не наблюдается.
Задавал свойства как для картинки так и для блока:
HTML5
1
2
border:none;
outline:none;
Думал может где, что перекрывает написал:
HTML5
1
2
border:none !important;
outline:none !important;
Но ничего не помогло, в Chrome всё равно есть рамка, вот даже пример:
Рамка вокруг фото в Chrome
- Chrome
Рамка вокруг фото в Chrome
- Mozila
Может кто решал данную проблему и может поделиться
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.04.2016, 23:49
Ответы с готовыми решениями:

Почему рамка создаётся вокруг картинки, а не вокруг блока?
Не подскажите ещё кое-что? Не хочу засорять тему HTML/CSS своими простецкими вопросами. Почему у...

Рамка вокруг текста
Как сделать рамку только вокруг текста, чтобы она до конца строки не тянулась?

Рамка вокруг изображения
Подскажите как исправить проблему, у меня на сайте (dle) есть статическая страница с изображениями,...

Рамка вокруг div
почему нет рамки вокруг div? &lt;html&gt; &lt;head&gt; &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot;...

15
13 / 13 / 6
Регистрация: 30.08.2015
Сообщений: 71
29.04.2016, 08:07 2
neverovski, архив с исходниками можно? или url сайта?
0
0 / 0 / 0
Регистрация: 18.10.2015
Сообщений: 22
29.04.2016, 08:55  [ТС] 3
VardSeller, Да. Можно даже посмотреть на этом сайте: http://graiz.by. На слайдере заметна рамка в Chrome, а в Mozila её нету
0
13 / 13 / 6
Регистрация: 30.08.2015
Сообщений: 71
29.04.2016, 09:18 4
Лучший ответ Сообщение было отмечено neverovski как решение

Решение

neverovski, да, заметил. В Chrome есть, а в Mozilla нету. Сейчас посмотрю

Добавлено через 16 минут
neverovski, Пропишите padding-top: 400px к img. Так решилось, но можете еще поюзать маргин.

Добавлено через 2 минуты
так как у вас картинка стоит backgroundом на отображение навряд ли повлияет.
1
Эксперт HTML/CSS
651 / 554 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
29.04.2016, 09:52 5
neverovski,
CSS
1
2
3
4
5
6
7
8
9
10
11
.tovar_width, .tovar, .tovar_consult {
    height: 260px;
    margin-bottom: 35px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(25,25, 25, 0.15); /*вот ваш бордер, уберите его*/
    padding-right: 0;
    padding-left: 0;
    margin-left: 15px;
    margin-right: 15px;
}
0
13 / 13 / 6
Регистрация: 30.08.2015
Сообщений: 71
29.04.2016, 10:01 6
Shakalaka, хм.. А я и не заметил бордюр там)) Но почему тогда у него в Mozilla все нормально?
0
Эксперт HTML/CSS
651 / 554 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
29.04.2016, 10:07 7
Цитата Сообщение от VardSeller Посмотреть сообщение
Но почему тогда у него в Mozilla все нормально?
Что значит нормально? В ff так же как и в хроме
0
13 / 13 / 6
Регистрация: 30.08.2015
Сообщений: 71
29.04.2016, 10:16 8
Цитата Сообщение от Shakalaka Посмотреть сообщение
Что значит нормально? В ff так же как и в хроме
Да нет. Я сам заходил в ff и там рамки не было.
0
0 / 0 / 0
Регистрация: 18.10.2015
Сообщений: 22
29.04.2016, 10:36  [ТС] 9
Shakalaka, это я привёл как пример. И это вы не слайдер смотрите, а я так понял что каталог. В ff однозначно этого нету на слайдере

Добавлено через 3 минуты
VardSeller, Да про padding-top всё работает на отлично

Добавлено через 2 минуты
VardSeller, Но это всё равно получается мы как бы его сдвинули в низ эту рамку, вот если прописать padding-top: 300px это даже очень видно. Даже интересно почему так, я понимаю что не прописано srс
0
13 / 13 / 6
Регистрация: 30.08.2015
Сообщений: 71
29.04.2016, 10:38 10
neverovski, я только заметил что еще каталог есть)) дальше не листал)

Добавлено через 1 минуту
Цитата Сообщение от neverovski Посмотреть сообщение
VardSeller, Но это всё равно получается мы как бы его сдвинули в низ эту рамку, вот если прописать padding-top: 300px это даже очень видно. Даже интересно почему так, я понимаю что не прописано srс
ну я не знаю почему так. может именно у хрома рамки так ставятся. но я обычно указываю для картинки src и все нормально
1
Эксперт HTML/CSS
2946 / 2531 / 1064
Регистрация: 15.12.2012
Сообщений: 9,477
Записей в блоге: 9
29.04.2016, 10:56 11
neverovski, выложите код таким, какой он у Вас в оригинале, хватит уже играть в угадайку... Телепатов и экстрасенсов здесь нет...
0
Эксперт HTML/CSS
2946 / 2531 / 1064
Регистрация: 15.12.2012
Сообщений: 9,477
Записей в блоге: 9
29.04.2016, 13:55 12
VardSeller, чтобы разбираться надо иметь код перед глазами, но его нет... Есть только палёная umi по ссылке...
0
0 / 0 / 0
Регистрация: 18.10.2015
Сообщений: 22
29.04.2016, 15:38  [ТС] 13
Fedor92, В угадайки никто не играет и экстрасенсов никто не вызывает. В ff можно через firebug смотреть код в оригинале, естественно и в Chrome его тоже можно сотреть
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#thumbs .touch_img img {
    padding-top: 250px;
    background-image: url(page4_img1_big.jpg);
    width: 100%;
    height: 250px;
    overflow: hidden;
    box-shadow: none;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    outline: none;
    border: none;
    background-size: cover;
}
0
Эксперт HTML/CSS
2946 / 2531 / 1064
Регистрация: 15.12.2012
Сообщений: 9,477
Записей в блоге: 9
29.04.2016, 15:59 14
Цитата Сообщение от neverovski Посмотреть сообщение
В угадайки никто не играет и экстрасенсов никто не вызывает
Вот именно, что играете... В начале топика по факту кода нет, на скрине конечно видно границу, но по одной строке кода только экстрасенс Вам может сказать от чего она взялась... Во-первых, ещё раз повторю вопрос: зачем для тега <img> ставится фон? Во-вторых, код который Вы дали в предыдущем посте вообще ни о чём... Откуда эти стили взяты? Почему нельзя выложить нормально код, чтобы мы могли его нормально посмотреть или хотя бы разместить на тестовом хостинге? Возможно рамка у Вас торчит от родительских блоков картинки, а не от картинки, как таковой... Где html? Как смотреть вложенность?
0
0 / 0 / 0
Регистрация: 18.10.2015
Сообщений: 22
30.04.2016, 10:02  [ТС] 15
Fedor92, Зачем делать фон? ты такой смешной, я лучше промолчу. По поводу вылаживать коды не коды. Вверху был пример сайта на котором я нашёл данную проблему, сайт не мой. VardSeller, ечли человек умеет пользоваться браузером и может посмотреть код, то он посмотрел и сказал как он бы решил. И ещё раз говорю в ff этой рамки нет, в Chrome есть. А в остальных браузерах не проверял. Тему считаю закрытой и к экстрасенсам не обращаемся
 Комментарий модератора 
Уважительно относитесь к другим участникам форума.
0
whiteapps
02.05.2016, 00:02     Рамка вокруг фото в Chrome
  #16
 Комментарий модератора 
neverovski, Fedor92, VardSeller, прекращаем срач, обсуждение/выпрашивание кармы и прочие нехорошие вещи
0
02.05.2016, 00:02
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
02.05.2016, 00:02
Привет! Вот еще темы с ответами:

Рамка вокруг <body>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;...

Рамка вокруг таблицы
у меня есть таблица, такая же как в примере, только не могу сделать рамку такую, чтоб только она...

Рамка вокруг картинки
Приветствую. Сделал рамку вокруг картинки, но мне нужно ее использовать не на всех картинках. Что...

Рамка вокруг button
Как убрать такую рамку у кнопки ? Ну или какой стиль за это отвечает ?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
16
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.