Автоматическое изменение размера изображений в контейнере Bootstrap

Я на самом деле кодирую веб-страницу в HTML5/CSS3/JS. Он состоит из изображений, которые можно кликать с различными эффектами (модалы, наведение и т. Д.). Я хотел бы позиционировать элементы с точностью в контейнере (чтобы сделать композицию легко доступной), а не непосредственно на странице. Стрелка должна быть центрирована в ящике, а разные кнопки должны быть расположены в разных областях. (см. изображение)Автоматическое изменение размера изображений в контейнере Bootstrap

Каков наилучший способ сделать это? С относительным или абсолютным позиционированием? Будет ли оно абсолютным относительно контейнера?
Как сделать содержимое контейнера отзывчивым (чтобы сохранить пропорции композиции). Могу ли я использовать для этого контейнеры Boostrap?

Это скриншот того, что я, что делать (изображение для кнопок и изображение для стрелки): Screenshot of the composition

Большое спасибо за вашу помощь :)

источник

2016-07-01 Nethim

Сделайте контейнер, который является высотой и шириной изображения стрелки, и установите его в положение: relative; 'затем используйте' position: absolute; 'с верхним/нижним и левым/правым позиционированием для других изображений в контейнере. – APAD1

позиция: относительная; для размещения стрелки или контейнера? :) – Nethim

См. Мой ответ ниже – APAD1

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

.container { 
 
    position:relative; 
 
} 
 
img.point { 
 
    position:absolute; 
 
} 
 
    img.point.one { 
 
    bottom:103px; 
 
    left:57px; 
 
    } 
 
    img.point.two { 
 
    bottom:21px; 
 
    left:57px; 
 
    }

<div class="container"> 
 
    <!-- <img class="final" src="https://s31.postimg.org/70gvh473f/final.jpg" /> --> 
 
    <img src="https://s31.postimg.org/g5p8azai3/arrow.jpg" /> 
 
    <img class="point one" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point two" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point three" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point four" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point five" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point six" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point seven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point eight" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point nine" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point ten" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point eleven" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
    <img class="point twelve" src="https://s31.postimg.org/rjbrm6l0r/dot.jpg" /> 
 
</div>

Что касается отклика, вы должны просто изменить размер точечных изображений, а также нижние/левые значения в каждой точке останова. Самый простой способ позиционирования точек состоит в том, чтобы конечное изображение располагалось внутри контейнера, а затем с помощью инспектора располагать точки над конечным изображением.

источник

2016-07-01 16:55:27 APAD1

Большое спасибо за вашу помощь :)! – Nethim

<span style="position:absolute;left:-50;top:-5;font-size:1px;width:250;height:10px;"> your code </span>

положение: Absolute следует использовать чаще. Это на самом деле своего рода счетчик, интуитивный абсолютный и относительный, если вы смотрите на CSS позиция: Absolute помогает определить точное положение, связанное с предыдущим элементом, что и будет использоваться для компоновки элементов партии.
Используйте переменные вместо номеров исправлений, чтобы сохранить расстояние между элементами в постоянном соотношении.

источник

2016-07-01 17:02:50

Автоматическое изменение размера изображений в контейнере Bootstrap

ответ

Смежные вопросы