Ответственный упаковщик изображений с фиксированной высотой - PullRequest
Новая
       20

Ответственный упаковщик изображений с фиксированной высотой

0 голосов
/ 16 апреля 2020

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

Но я обнаружил проблему с изображениями на странице одного продукта. Есть карусель (slick3), и изображения, которые идут с шаблоном, имеют одинаковый размер, и они выглядят хорошо, без проблем на странице при изменении размера браузера.

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

Я пытался использовать медиазапросы, чтобы установить фиксированную высоту контейнера, а затем применить объект -fit: содержать, но я думаю, что медиа-запросы здесь не лучший выбор.

Здесь я включаю некоторые css и html, которые идут с шаблоном: 

<div class="wrap-slick3 flex-sb flex-w">
    <div class="wrap-slick3-dots"></div>
    <div class="wrap-slick3-arrows flex-sb-m flex-w"></div>

    <div class="slick3 gallery-lb">
        <div class="item-slick3" data-thumb="{% static 'notifications/images/product-detail-01.jpg' %}">
            <div class="wrap-pic-w pos-relative">
                <img src="{% static 'notifications/images/product-detail-01.jpg' %}" alt="IMG-PRODUCT">

                <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="{% static 'notifications/images/product-detail-01.jpg' %}">
                    <i class="fa fa-expand"></i>
                </a>
            </div>
        </div>

        <div class="item-slick3" data-thumb="{% static 'notifications/images/product-detail-02.jpg' %}">
            <div class="wrap-pic-w pos-relative">
                <img src="{% static 'notifications/images/product-detail-02.jpg' %}" alt="IMG-PRODUCT">

                <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="{% static 'notifications/images/product-detail-02.jpg' %}">
                    <i class="fa fa-expand"></i>
                </a>
            </div>
        </div>

        <div class="item-slick3" data-thumb="{% static 'notifications/images/product-detail-03.jpg' %}">
            <div class="wrap-pic-w pos-relative">
                <img src="{% static 'notifications/images/product-detail-03.jpg' %}" alt="IMG-PRODUCT">

                <a class="flex-c-m size-108 how-pos1 bor0 fs-16 cl10 bg0 hov-btn3 trans-04" href="{% static 'notifications/images/product-detail-03.jpg' %}">
                    <i class="fa fa-expand"></i>
                </a>
            </div>
        </div>
    </div>
</div>

/*//////////////////////////////////////////////////////////////////
[ Slick3 ]*/
.wrap-slick3 {
  position: relative;
}

/*---------------------------------------------*/
.wrap-slick3-arrows {
  position: absolute;
  z-index: 100;
  width: 83.333333%;
  right: 0;
  top: calc(50% - 20px);
}

.arrow-slick3 {
  font-size: 25px;
  color: #fff;

  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,0.5);

  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.arrow-slick3:hover {
  background-color: rgba(0,0,0,0.9);
}

.prev-slick3 {left: 0px;}
.next-slick3 {right: 0px;}

/*---------------------------------------------*/
.wrap-slick3-dots {
  width: 11.111111%;
}

.slick3 {
  width: 83.333333%;
}

.slick3-dots li {
  display: block;
  position: relative;
  width: 100%;
  margin-bottom: 27px;
}

.slick3-dots li img {
  width: 100%;
}

.slick3-dot-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: pointer;
  border: 2px solid transparent;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.slick3-dot-overlay:hover {
  border-color: #ccc;
}

.slick3-dots .slick-active .slick3-dot-overlay {
  border-color: #ccc;
}



/*//////////////////////////////////////////////////////////////////

Можете ли вы дать мне руководство, что делать?

...