Блог

Я пытался разработать страницу продукта для своего веб-сайта, и у меня есть три ракурса для изображений моего продукта, поэтому я хотел создать галерею изображений при переходе на страницу. Макет, с которым я собираюсь работать, и код, который у меня есть на данный момент, находятся по этой ссылкеhttps://jsfiddle.net/b1g2f8dh / . Моя проблема в том, что я хочу, чтобы это было отзывчивым, поэтому я хочу, чтобы ширина изображения .main уменьшалась вместе со страницей по мере ее сворачивания, пока она не достигнет минимальной ширины, и в этом случае .angle-images div, который я хочу переместить ниже основного изображения div и с расположенными горизонтально миниатюрами. Моя первая проблема в том, что я не могу изменить размер основного изображения, несмотря на то, что у меня ширина 100%. Я бы подумал, что это уменьшит его по мере уменьшения родительского контейнера. Вторая проблема заключается в том, что я не могу понять, как сдвинуть вторые изображения ниже. Я перепутал все свои позиции, и, похоже, ничего не работает! Я планирую разобраться с некоторым javascript, поэтому, когда вы нажимаете на миниатюру, она становится основным изображением, но это проблема на другой день, ха! Любая помощь была бы оценена. Полную реализацию моего кода можно найти здесь на случай, если это поможетhttps://www.printperry.com/home/product-page/index.php

 <div class="product-images">
  <div class="angle-images">
    <li>
      <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">  
    </li>
    <li>
      <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">  
    </li>
    <li>
      <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">  
    </li>
  </div>
  <div class="main-image">
        <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt=""> 
  </div>
</div>

.product-images{
  max-height: 700px;
  max-width: 700px;
  width: 100%;
  display: block;
}
.angle-images{
  padding:5px 0px;
  width: 120px;
  display: inline-block;
  float:left;
  max-height: 700px;
}
.main-image{
  width: 80%;
  height: 600px;
  float: left;
  margin: 10px;
}
.angle-images li{
  list-style: none;
  padding-top: 50px;
}
.angle-images img {
  width: 100px;
  float: right;
  margin:5px 10px;
}
.main-image img {
  width: auto;
  height:700px;
}
  

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

Это работает после внесения изменений ниже.

Использование flexbox для режима компоновки упрощает переключение между макетами столбцов и строк на основе медиа-запроса.

 .product-images{
  max-height: 700px;
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  flex-direction: column-reverse;
}
@media (min-width: 768px) {
  .product-images {
    flex-flow: row nowrap;
  }
}
.angle-images{
  padding:5px 0px;
  width: 120px;
  max-height: 700px;
  display: flex;
}
@media (min-width: 768px) {
  .angle-images {
    flex-flow: column nowrap;
  }
}
.main-image{
  width: 80%;
  height: 600px;
  margin: 10px;
}
.angle-images li{
  list-style: none;
  padding-top: 50px;
}
.angle-images img {
  width: 100px;
  margin:5px 10px;
}
.main-image img {
  max-width: 100%;
}
  

Как упоминал Дэн в своем посте, были противоречивые значения. Одной из проблем, которые я видел, был размер родительского контейнера и дочернего контейнера. Я тоже учусь, и один совет, который я бы вам дал, — попробуйте использовать border-style, чтобы помочь вам видеть визуально, это делает решение проблем более прямым и простым.Это действительно помогает, когда вы работаете с несколькими контейнерами div. Затем поиграйте с тем, что вы знаете, и попытайтесь понять, как это сделать подходящим. Я решил попробовать это и придумал эту версию. К сожалению, вам пришлось бы использовать Flex, это просто упростило решение проблем. На данный момент angle и main реагируют вместе, если только вы не пытались сделать только main отзывчивым, пожалуйста, дайте мне знать, чтобы я мог потратить еще немного времени позже и посмотреть, смогу ли я вам помочь, но пока это то, что у меня есть. Я надеюсь, что это приведет вас к правильному пути того, чего вы пытаетесь достичь.

 <div class="product-images">

  <div class="angle-images">

    <ul class="angle-ul">
      <li class="angle-li angle-li-1">
        <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
      </li>
      <li class="angle-li angle-li-2">
        <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
      </li>
      <li class=" angle-li angle-li-3">
        <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
      </li>
    </ul>

  </div>

  <div class="main-Image">
    <img data-image="White" src="https://cdn.ssactivewear.com/Images/Color/17130_f_fl.jpg" alt="">
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}

.product-images {
  height: 700px;
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: warp;
  border-style: dotted;
}

.angle-images {
  width: 100px;
  border-style: dotted;
}

.angle-ul {
}

.angle-li img {
  width: 100%;
}
.main-Image img {
  height: 100%;
  width: 100%;
}