Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Проблема с IE9 и выше div background-image / 6 сообщений из 6, страница 1 из 1
13.06.2019, 06:16
    #39825904
Золотов Константин
Золотов Константин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с IE9 и выше div background-image
Здравствуйте.
Столкнулся с такой проблемой. При разрешение свыше 1388 div-ы в ИЕ9 и выше ведут себя не очень понятно
То есть в div я указываю background-image путь к картинке и ее размеры
В ИЕ9 и выше картинки имеют разную ширину и высоту. Это заметно когда расширение экрана выше 1388
Вот стили
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
.disable_row_chasto_rase
  padding-left: -15px
  margin-right: -15px

.main_block_popular_rase
  width: 100%
  height: auto
  padding: 0
  margin: 0 auto
  display: table

.populyar_rase
  width: calc((100% / 5))
  margin: 0 auto
  padding: 0 auto
  display: table-cell
  //display: inline-block
  vertical-align: middle
  text-align: center

.populyar_rase:hover
  cursor: pointer

.populyar_rase_title
  font-family: 'BarnaulGrotesk Bold'
  height: 43px
  font-size: 1.3em
  text-align: center
  vertical-align: 0
  margin-top: 0
  margin-bottom: 0

.popular_rase_img
  margin: 0

@media screen and (min-width: 1025px) and (max-width: 1200px), only screen and (max-device-width: 1025px) and (max-device-width: 1200px)
  .populyar_rase_title
    height: 40px

@media screen and (max-width: 1024px), only screen and (max-device-width: 1024px)
  .populyar_rase_title
    height: 40px
    font-size: 1.3em

@media screen and (max-width: 769px), only screen and (max-device-width: 769px)
  .populyar_rase_title
    font-size: 1.1em

%div-img_background_img
  width: 100%
  margin: 0 auto
  text-align: center

.populyar_rase_IMG
  @extend %div-img_background_img
  padding-top: 66.36363636%

.eniseysklTitleImg
  @extend %div-img_background_img
  padding-top: 24.44444%

.populyar_rase_IMG:hover
  transform: scale(1.05)

%div-chasto-rase-img
  background-position: 50% 50%
  background-repeat: no-repeat
  background-size: 84.0978593% auto
  margin: 0 auto
  text-align: center

.tomskIMG
  @extend %div-chasto-rase-img
  background-image: url(/media/img/img1.jpg)

.kemerovoIMG
  @extend %div-chasto-rase-img
  background-image: url(/media/img/img1.jpg)

.kyzylIMG
  @extend %div-chasto-rase-img
  background-image: url(/media/img/img1.png)

.eniseysklIMG
  @extend %div-chasto-rase-img
  background-image: url(/media/img/img1.png)

.ustIMG
  @extend %div-chasto-rase-img
  background-image: url(/media/img/img1.jpg)


@media screen and (max-width: 769px), only screen and (max-device-width: 769px)
  .tomskIMG,
  .kemerovoIMG,
  .kyzylIMG,
  .eniseysklIMG,
  .ustIMG,
  .eniseysklImgTitle
    background-image: none


Код: php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<div class="row disable_row_chasto_rase" id="populyar_rase">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 disable_row_chasto_rase">
        <div class="main_block_popular_rase">
            <div class="populyar_rase" style="border: 1px #000 solid;">
                <h4 class="populyar_rase_title" id="eniseysk">
                    Путь
                </h4>
                <p class="popular_rase_img">
                    <div class="populyar_rase_IMG eniseysklIMG" id="eniseysk_img"></div>
                </p>
                <h4 align="center" class="chasto-rase-txt">
                    0.50 руб.
                </h4>
            </div>
            <div class="populyar_rase" style="border: 1px #000 solid;">
                <h4 class="populyar_rase_title" id="kyzyl">
                   Путь
                </h4>
                <p class="popular_rase_img">
                    <div class="populyar_rase_IMG kyzylIMG" id="kyzyl_img"></div>
                </p>
                <h4 align="center" class="chasto-rase-txt">
                    1.00 руб.
                </h4>
            </div>
            <div class="populyar_rase" style="border: 1px #000 solid;">
                <h4 class="populyar_rase_title" id="kemerovo">
                   Путь
                </h4>
                <p class="popular_rase_img">
                    <div class="populyar_rase_IMG kemerovoIMG" id="kemerovo_img"></div>
                </p>
                <h4 align="center" class="chasto-rase-txt">
                    1.00 руб.
                </h4>
            </div>
            <div class="populyar_rase" style="border: 1px #000 solid;">
                <h4 class="populyar_rase_title" id="tomsk">
                    Путь
                </h4>
                <p class="popular_rase_img">
                    <div class="populyar_rase_IMG tomskIMG" id="tomsk_img"></div>
                </p>
                <h4 align="center" class="chasto-rase-txt">
                    0.00 руб.
                </h4>
            </div>
            <div class="populyar_rase" style="border: 1px #000 solid;">
                <h4 class="populyar_rase_title text-center" id="ust">
                    путь
                </h4>
                <p class="popular_rase_img">
                    <div class="populyar_rase_IMG ustIMG" id="ust_img"></div>
                </p>
                <h4 align="center" class="chasto-rase-txt">
                   0.00 руб.
                </h4>
            </div>
        </div>
    </div>
</div>



Что мне нужно подправить, чтобы в ИЕ9 и выше свыше 1388 картинки показывало нормально
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.06.2019, 09:02
    #39825959
Korcar
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с IE9 и выше div background-image
ширина и высота картинки увеличиваются/уменьшаются пропорционально?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.06.2019, 09:22
    #39825975
Золотов Константин
Золотов Константин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с IE9 и выше div background-image
Korcar,

Да уменьшаются пропорционально.
Мне просто не понятно почему в ИЕ9 и выше, картинки имеют разные размеры,
При том img меня не устраивает. именно нужен background-image.

Или мне придется картинки AJAX-ом подгружать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.06.2019, 13:30
    #39826138
Korcar
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с IE9 и выше div background-image
Золотов Константин, масштаб по всех версиях ИЕ одинаковый выставлен?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.06.2019, 06:26
    #39826380
Золотов Константин
Золотов Константин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с IE9 и выше div background-image
Я его не менял.
Вы имеете ввиду в теге meta?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.06.2019, 06:55
    #39826384
Korcar
Korcar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с IE9 и выше div background-image
Золотов КонстантинЯ его не менял.
Вы имеете ввиду в теге meta?
кто и что не менял - это ни о чем не говорит. подразумевал Ctrl+scroll мыши
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Проблема с IE9 и выше div background-image / 6 сообщений из 6, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 179ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1443747]:
 0ms
get settings:
 11ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 67ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 48ms
get tp. blocked users:
 2ms
others: 15ms
total:  179ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]