如何将图像的响应高度或宽度添加到容器中？

【问题标题】：How to add responsive height or width of the image to the container?如何将图像的响应高度或宽度添加到容器中？
【发布时间】：2021-06-09 02:15:00
【问题描述】：

<div style={{height: ? }}> <img style={{height: 'auto'}} src=""/> </div>

我需要知道，即使在 javascript 中更改了高度值，如何访问它。

【问题讨论】：

标签： javascript reactjs height responsive

【解决方案1】：

如果元素已在 DOM 中呈现，则可以使用getComputedStyle (MDN Docs) 访问它的实际呈现高度的一种方法。

这是一个如何使用它的示例：

const img = document.querySelector('div img');
const styles = window.getComputedStyle(img);
console.log('height:', styles.getPropertyValue('height'));

这有帮助吗？

【讨论】：

【解决方案2】：

使用 object-fit 为响应式图像添加这种类型的 css。

.image-container{

  width: 33.3333%;
  
}

img{
  
  width:100%;
  height: 400px;   //this height according to you
  object-fit: cover;
  object-position: center;
}

【讨论】：