Активация чувствительных изображений в фиксированном положении при изменении размера окна

Я пытался сделать страницу с четырьмя отзывчивыми изображениями, расположенными в блоках. Как два изображения в первой строке и две во второй строке.Активация чувствительных изображений в фиксированном положении при изменении размера окна

И так как отзывчивый, я пытался заставить их сжиматься, оставаясь на своих местах. Но это вроде как жонглирует, пока я пытаюсь изменить размер окна.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<style> 
 
#image1 { 
 
    \t position:relative; 
 
    \t float: left; 
 
    padding-left: 10px; 
 
    margin-left:250px; 
 
\t border:1px solid; 
 
    } 
 
    #image2 { 
 
    \t position:relative; 
 
    \t float: left; 
 
    padding-left: 10px; 
 
    margin-left:300px; 
 
\t border:1px solid; 
 
\t padding-bottom:10px; 
 
    } 
 
    #image3 { 
 
    position:relative; 
 
    \t float: left; 
 
    margin-left:250px; 
 
    padding-top:10px; 
 
\t border:1px solid; 
 
    } 
 
    #image4 { 
 
    position:relative; 
 
    \t float: left; 
 
\t padding-top:10px; 
 
    padding-left: 10px; 
 
    margin-left:300px; 
 
\t border:1px solid; 
 

 
    }

<div class="container"> 
 
    <h2>Image</h2> 
 
    <p>This text is responsive too</p> 
 
    <img class="img-responsive" src="img.png" id="image1" alt="Chania" width="150" height="150"> 
 
    <img class="img-responsive" src="img.png" id="image2" alt="Chania" width="150" height="150"> 
 
    <img class="img-responsive" src="img.png" id="image3" alt="Chania" width="150" height="150"> 
 
    <img class="img-responsive" src="img.png" id="image4" alt="Chania" width="150" height="150"> 
 
</div>

Любое предложение очень ценится ..

источник

2017-02-05 harishk

Во-первых. Я вижу, что вы используете бутстрап. Убедитесь, что вы используете встроенную систему компоновки сетки. Ваш контейнер не будет использоваться, если вы не установите строки и столбцы. Это позволит справиться с большей частью вашего отзывчивого поведения.

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

Если вам действительно нужна позиция. Тогда родитель будет иметь относительное свойство. Ребенок, которого вы хотите переместить, будет установлен на абсолютный. Google mdn для получения дополнительной информации о свойствах. Примечание: если вы не зададите положение дочернего элемента в абсолютном, то этот элемент останется в нормальном потоке и игнорирует относительный родитель.

Нечто подобное могли бы получить движется в правильном направлении:

<style> 
 
    parent-div { 
 
     position: relative; 
 
    } 
 
    child-image { 
 
     position: absolute; 
 
     left: 0; 
 
     top: 0; 
 
    } 
 
    child-text { 
 
     position: absolute; 
 
     bottom: 10px; 
 
     left: 0; 
 
     z-index: 10; /*set text above image*/ 
 
    } 
 
    img { 
 
     width: 100%; /* fill to parent */ 
 
    } 
 
</style> 
 

 
<body class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-md-6 parent-div"> 
 
     <p class="child-text">This text is responsive too</p> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
    <div class="col-md-6 parent-div"> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
</div><!-- End of row --> 
 
<div class="row"> 
 
    <div class="col-md-6 parent-div"> 
 
     <p>This text is responsive too</p> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
    <div class="col-md-6 parent-div"> 
 
     <img class="child-image" href="" alt=""> 
 
    </div> 
 
</div><!-- End of row --> 
 

 
</body><!-- End of page -->

источник

2017-02-05 17:11:38

почему мы не можем изменить размер изображения и положение с метками Маржа-топ/левый стиль? – harishk

Вы можете ... но если вы понимаете, что используют элементы HTML-модели коробки. Вы понимаете, что кражи обрушиваются, позиции удаляют элементы из потока страницы. Это может привести к возникновению множества других проблем, совпадений и т. Д. Это может создать массу проблем для вас. Используйте свою структуру для создания сайта, используйте поля и дополнения, чтобы настроить сайт. –

Кроме того, динамическое поведение должно обрабатываться структурой, или вы будете писать тонну медиа-запросов для обеспечения правильного размещения элементов на разных устройствах. У вас есть bootstrap, и это именно то, для чего. Отзывчивая структура. –

Активация чувствительных изображений в фиксированном положении при изменении размера окна

ответ

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