Задание высоты элементу после render'a

156

09 июня 2018, 17:40

У меня вот так выглядят товары в магазине, высота у всех разная, хочу задать высоту каждого элемента равную его ширине. При расширении окна, отлично работает следующий код на JQuery:

function setHeight() {
        $('.product__img').height($('.product__img').width());
    }
    $(window).resize(function () {
        setHeight();
    })

Однако при рендере страницы не могу понять как задать высоту элемента. Код рендера React компонента:

 renderClothes(clothe, index) {
        return (
            <div className="product__griditem" key={index}>
                <Link to={`clothes/${clothe.id}`} className="product ">
                    <div className="product__img z-depth-1"><img src={clothe.image}/></div>
                    <div className="product__info">
                        <span className="product__name">{clothe.name}</span>
                        <span className="product__disc">{clothe.description}</span>
                        {this.setRating(clothe.rating)}
                        <span className="product__price">${clothe.price}</span>
                    </div>
                </Link>
            </div>
        )
    }

    render() {
        const data = this.props.clothes
        console.log('data', data);
        return (
            <div className="content">
                <div className="product__grid">
                    { data.map((clothe, index) => this.renderClothes(clothe, index))
                    }
                </div>
            </div>
        );
    }

Answer 1

Вам тут js не нужен. есть же возможность картинку фоном поставить? Сделайте блок, через padding нужный высоты, далее картинку фоном (ну или через картинку, но absolute). На медиа запросах, выставляете нужные пропорции

body { 
  background-color: gray; 
} 
.product__img__items { 
  display: flex; 
  flex-wrap: wrap; 
} 
.product__img__item { 
  width: 23%; 
  margin-left: 1%; 
  margin-bottom: 25px; 
} 
.product__img { 
  height: 0; 
  width: 100%; 
  padding-top: 100%; 
  background-color: #fff; 
  border-bottom: 3px solid green; 
  background-size: contain; 
  background-position: center center; 
  margin-bottom: 5px; 
  background-repeat: no-repeat; 
}

<div class="product__img__items"> 
  <div class="product__img__item"> 
     <div class="product__img z-depth-1" style="background-image: url(https://besplatka.ua/aws/15/99/56/78/app/b2835e5c5c7b.JPG)"></div> 
    <div> 
      Lorem ipsum dolor sit amet. 
    </div> 
  </div> 
   <div class="product__img__item"> 
     <div class="product__img z-depth-1" style="background-image: url(https://besplatka.ua/aws/15/99/56/78/app/b2835e5c5c7b.JPG)"></div> 
    <div> 
      Lorem ipsum dolor sit amet. 
    </div> 
  </div> 
   <div class="product__img__item"> 
     <div class="product__img z-depth-1" style="background-image: url(https://besplatka.ua/aws/15/99/56/78/app/b2835e5c5c7b.JPG)"></div> 
    <div> 
      Lorem ipsum dolor sit amet. 
    </div> 
  </div> 
   <div class="product__img__item"> 
     <div class="product__img z-depth-1" style="background-image: url(https://besplatka.ua/aws/15/99/56/78/app/b2835e5c5c7b.JPG)"></div> 
    <div> 
      Lorem ipsum dolor sit amet. 
    </div> 
  </div> 
   <div class="product__img__item"> 
     <div class="product__img z-depth-1" style="background-image: url(https://besplatka.ua/aws/15/99/56/78/app/b2835e5c5c7b.JPG)"></div> 
    <div> 
      Lorem ipsum dolor sit amet. 
    </div> 
  </div> 
  
   
</div>