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

@neverovski · Регистрация: 18.10.2015

Добрый вечер всем. Может кто сталкивался. Вывожу картинку на страницу в теге <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

- Mozila
Может кто решал данную проблему и может поделиться

@VardSeller · 29.04.2016, 08:07

neverovski, архив с исходниками можно? или url сайта?

@neverovski · 29.04.2016, 08:55 **[ТС]**

VardSeller, Да. Можно даже посмотреть на этом сайте: http://graiz.by. На слайдере заметна рамка в Chrome, а в Mozila её нету

@VardSeller · 29.04.2016, 09:18

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

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

Добавлено через 2 минуты
так как у вас картинка стоит backgroundом на отображение навряд ли повлияет.

@Shakalaka · 29.04.2016, 09:52

neverovski,

CSS

.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;
}

@VardSeller · 29.04.2016, 10:01

Shakalaka, хм.. А я и не заметил бордюр там)) Но почему тогда у него в Mozilla все нормально?

@Shakalaka · 29.04.2016, 10:07

Сообщение от VardSeller

Но почему тогда у него в Mozilla все нормально?

Что значит нормально? В ff так же как и в хроме

@VardSeller · 29.04.2016, 10:16

Сообщение от Shakalaka

Что значит нормально? В ff так же как и в хроме

Да нет. Я сам заходил в ff и там рамки не было.

@neverovski · 29.04.2016, 10:36 **[ТС]**

Shakalaka, это я привёл как пример. И это вы не слайдер смотрите, а я так понял что каталог. В ff однозначно этого нету на слайдере

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

Добавлено через 2 минуты
VardSeller, Но это всё равно получается мы как бы его сдвинули в низ эту рамку, вот если прописать padding-top: 300px это даже очень видно. Даже интересно почему так, я понимаю что не прописано srс

@VardSeller · 29.04.2016, 10:38

neverovski, я только заметил что еще каталог есть)) дальше не листал)

Добавлено через 1 минуту

Сообщение от neverovski

VardSeller, Но это всё равно получается мы как бы его сдвинули в низ эту рамку, вот если прописать padding-top: 300px это даже очень видно. Даже интересно почему так, я понимаю что не прописано srс

ну я не знаю почему так. может именно у хрома рамки так ставятся. но я обычно указываю для картинки src и все нормально

@Fedor92 · 29.04.2016, 10:56

neverovski, выложите код таким, какой он у Вас в оригинале, хватит уже играть в угадайку... Телепатов и экстрасенсов здесь нет...

@Fedor92 · 29.04.2016, 13:55

VardSeller, чтобы разбираться надо иметь код перед глазами, но его нет...

Есть только палёная umi по ссылке...

@neverovski · 29.04.2016, 15:38 **[ТС]**

Fedor92, В угадайки никто не играет и экстрасенсов никто не вызывает. В ff можно через firebug смотреть код в оригинале, естественно и в Chrome его тоже можно сотреть

CSS

#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;
}

@Fedor92 · 29.04.2016, 15:59

Сообщение от neverovski

В угадайки никто не играет и экстрасенсов никто не вызывает

Вот именно, что играете...

В начале топика по факту кода нет, на скрине конечно видно границу, но по одной строке кода только экстрасенс Вам может сказать от чего она взялась... Во-первых, ещё раз повторю вопрос: зачем для тега <img> ставится фон? Во-вторых, код который Вы дали в предыдущем посте вообще ни о чём... Откуда эти стили взяты? Почему нельзя выложить нормально код, чтобы мы могли его нормально посмотреть или хотя бы разместить на тестовом хостинге? Возможно рамка у Вас торчит от родительских блоков картинки, а не от картинки, как таковой... Где html? Как смотреть вложенность?

@neverovski · 30.04.2016, 10:02 **[ТС]**

Fedor92, Зачем делать фон? ты такой смешной, я лучше промолчу. По поводу вылаживать коды не коды. Вверху был пример сайта на котором я нашёл данную проблему, сайт не мой. VardSeller, ечли человек умеет пользоваться браузером и может посмотреть код, то он посмотрел и сказал как он бы решил. И ещё раз говорю в ff этой рамки нет, в Chrome есть. А в остальных браузерах не проверял. Тему считаю закрытой и к экстрасенсам не обращаемся

Комментарий модератора

Уважительно относитесь к другим участникам форума.

@whiteapps · 02.05.2016, 00:02

Комментарий модератора

neverovski, Fedor92, VardSeller, прекращаем срач, обсуждение/выпрашивание кармы и прочие нехорошие вещи

@Fedor92 2946 / 2531 / 1064 Регистрация: 15.12.2012 Сообщений: 9,477 Записей в блоге: 9
	29.04.2016, 10:56	11
	neverovski, выложите код таким, какой он у Вас в оригинале, хватит уже играть в угадайку... Телепатов и экстрасенсов здесь нет... 0

@Fedor92 2946 / 2531 / 1064 Регистрация: 15.12.2012 Сообщений: 9,477 Записей в блоге: 9
	29.04.2016, 13:55	12
	VardSeller, чтобы разбираться надо иметь код перед глазами, но его нет... Есть только палёная umi по ссылке... 0

@Fedor92 2946 / 2531 / 1064 Регистрация: 15.12.2012 Сообщений: 9,477 Записей в блоге: 9
	29.04.2016, 15:59	14
	Сообщение от neverovski В угадайки никто не играет и экстрасенсов никто не вызывает Вот именно, что играете... В начале топика по факту кода нет, на скрине конечно видно границу, но по одной строке кода только экстрасенс Вам может сказать от чего она взялась... Во-первых, ещё раз повторю вопрос: зачем для тега <img> ставится фон? Во-вторых, код который Вы дали в предыдущем посте вообще ни о чём... Откуда эти стили взяты? Почему нельзя выложить нормально код, чтобы мы могли его нормально посмотреть или хотя бы разместить на тестовом хостинге? Возможно рамка у Вас торчит от родительских блоков картинки, а не от картинки, как таковой... Где html? Как смотреть вложенность? 0

@VardSeller 13 / 13 / 6 Регистрация: 30.08.2015 Сообщений: 71
	29.04.2016, 08:07	2
	neverovski, архив с исходниками можно? или url сайта? 0

@neverovski 0 / 0 / 0 Регистрация: 18.10.2015 Сообщений: 22
	29.04.2016, 08:55 [ТС]	3
	VardSeller, Да. Можно даже посмотреть на этом сайте: http://graiz.by. На слайдере заметна рамка в Chrome, а в Mozila её нету 0

@VardSeller 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

@VardSeller 13 / 13 / 6 Регистрация: 30.08.2015 Сообщений: 71
	29.04.2016, 10:01	6
	Shakalaka, хм.. А я и не заметил бордюр там)) Но почему тогда у него в Mozilla все нормально? 0

@Shakalaka 651 / 554 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	29.04.2016, 10:07	7
	Сообщение от VardSeller Но почему тогда у него в Mozilla все нормально? Что значит нормально? В ff так же как и в хроме 0

@VardSeller 13 / 13 / 6 Регистрация: 30.08.2015 Сообщений: 71
	29.04.2016, 10:16	8
	Сообщение от Shakalaka Что значит нормально? В ff так же как и в хроме Да нет. Я сам заходил в ff и там рамки не было. 0

@neverovski 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

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

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

Решение