Сделайте так, чтобы группа изображений вела себя как блок (например, изменяйте размер вместе)!

Я пытаюсь сделать несколько изображений вместе (как блок), когда окно изменяется пользователем (или просто адаптироваться к различным размерам экрана).

Все изображения находятся в таблице, row1 / column1= map plus river images. row1 / column2= описание рек, которые можно посмотреть, нажав на каждую реку на карте.

1) основным изображением является карта и ее по Z-индексу: -1 позиция:абсолютная;
2) следующие изображения реки расположены абсолютно на верхней части карты. У этих изображений есть поведение наведения курсора, чтобы поменять изображение с ним, но другой цвет, плюс onclick, который делает текст на ячейке таблицы на следующем столбце, чтобы перейти к определенному якорю.

Как это есть интерактивность с пользователем и карта / реки.

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

Ниже немного кода html, ссылающегося на изображение карты и одно изображение реки (все другие просто повторяют)

«формат HTML»

<div class="container-fluid" id="page-bg">
<table width="100%" border="0" cellpadding="1" cellspacing="1"   id="interactive">
<tbody>
<tr>
<td width="100%">
<img src="../images/backgrounds/01_FFAlgarve_Background.png" width="100%"  height="1050" alt="" id="intmap">
<a href="#a3" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('funcho','','../images/buttons/funcho1.png',1)">
<img src="../images/buttons/funcho.png" alt="" width="100%" height="auto" id="funcho" title="Funcho Dam">

«стиль CSS»

//таблица

#interactive{
 position:relative;
 z-index:-1;
}

//изображение карты

#intmap{
 position:absolute; 
 z-index:-1;
 top:0px;
 left:0px;
 max-width:1750px;
 }

// изображение реки

#funcho{
 position:absolute; 
 z-index:2;
 top:510px;
 left:650px;
 max-width:222px;
 max-height:132px;
}

Заранее большое спасибо за всю помощь, которую я могу получить 😉
С уважением
мЗв

2 ответа

  1. Ну, вы используете фиксированное значение для ваших рек, left:650px;все еще 650px слева, даже если карта только 300px шириной.

    Попробуйте использовать проценты.

    //редактировать
    Так что ваша карта 1050px высокая, изначально ваша река 510 сверху, так что 100(510/1050) = 48.57

    #river {
    top:48.57%;
    }
    
  2. Попробуйте использовать запросы мультимедиа
    изменение размера окна, чтобы увидеть, где ваш макет разрывов и использовать медиа-запросы для изменения css для нужного размера окна

    в ваш css файл положите это

    @media only screen and (max-width: 370px)
    {
        //Desired css goes here
    }
    

    Css, помещенный в приведенном выше примере, будет работать для размера окна >= 370 px

    Вы можете иметь так много запросов по мере того как вы хотите с различными максимальными или минимальными ширинами
    Только поместите правила, которые вы изменяете для id или класса.Любые другие правила останутся такими же, как определенные внешние запросы мультимедиа

    И да проценты помогут вам много, но может вызвать дополнительные проблемы эксперимент с медиа-запросов и проценты