ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Проблема с IE9 и выше div background-image
6 сообщений из 6, страница 1 из 1
Проблема с IE9 и выше div background-image
    #39825904
Золотов Константин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Золотов Константин
Участник
Здравствуйте.
Столкнулся с такой проблемой. При разрешение свыше 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, 06:16
| Ответить | Цитировать | Написать  
Проблема с IE9 и выше div background-image
    #39825959
Korcar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Korcar
Участник
ширина и высота картинки увеличиваются/уменьшаются пропорционально?
...
Рейтинг: 0 / 0
13.06.2019, 09:02
| Ответить | Цитировать | Написать  
Проблема с IE9 и выше div background-image
    #39825975
Золотов Константин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Золотов Константин
Участник
Korcar,

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

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


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