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

Question

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

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

Answer 1

为响应式图像添加object-fit。

.image-container{
width: 33.3333%;

}
img{

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

Answer 2

如果元素已经在DOM中渲染，你可以使用getComputedStyle(MDN文档)访问它的实际渲染高度的一种方法。

下面是一个如何使用的例子:

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

有帮助吗?