Блог

У меня есть CSS-сетка в моем приложении React. Столбцы уже имеют правильную ширину. В одну из ячеек этой сетки я хочу добавить <div> , которая поддерживает фиксированное соотношение сторон при увеличении (или укорачивании) ширины ячейки; это означает, что высота должна изменяться соответствующим образом.

Примечание: поскольку это <div> является частью повторно используемого компонента, я передаю высоту и ширину <div> в качестве встроенных стилей для maxHeight и MaxWidth. Я хочу, чтобы это работало, даже если внутри div нет содержимого, поскольку это часть последовательности анимации, и мне нужно, чтобы это пространство было свободным.

JS:

 <div className="img-container" style={{maxHeight: props.dimensions.height, maxWidth: props.dimensions.width}}>  (content goes here)  </div>
  

Затем я применяю классы CSS к «img-container», чтобы установить ширину на 100%. Также установить фон на «красный», просто чтобы посмотреть, работает ли это.

CSS:

 .img-container { width: 100%; background: red; }
  

Но, увы, красный цвет не отображается. Я вижу в инструментах разработки, что ширина работает, однако на экране нет красного цвета, поскольку нет высоты. Может кто-нибудь подсказать мне, что я могу сделать, чтобы создать этот div с красным фоном с фиксированным соотношением сторон, размер которого будет увеличиваться или уменьшаться в соответствии с шириной ячейки сетки?

ваша div структура тега указана неправильно. вам нужно вот так:

 <div className="img-container" style={{maxHeight: props.dimensions.height, maxWidth: props.dimensions.width}}>  (content goes here)  </div>
  

Вы можете достичь желаемых результатов, добавив дочерний div с минимальной шириной и минимальной высотой, чтобы сохранить соотношение сторон.

 <div className="img-container" style={...styles}>   
   <div className='inner-div'></div>
</div>
  

CSS

 .inner-div {
   min-height: 200px;
   min-width: 200px; 
}

//change the above values according to your requirements.
  

Найден ответ!

Давайте поработаем над моим примером, однако изменим JS и CSS как таковые, а также включим inner div с именем класса ‘img-inner’ в качестве примера.

JS:

Давайте также вставим paddingTop в качестве реквизита.

 <div className="img-container" style={{maxHeight: props.dimensions.height, maxWidth: props.dimensions.width, paddingTop: `${props.dimensions.height/props.dimensions.width*100}%`}}>  (content goes here, e.g. a div with className="img-inner")  </div>
  

CSS:

 .img-container { width: 100%, position: relative }

.img-inner { position: absolute, top: 0, bottom: 0, left: 0, right: 0 }