自动更改容器高度以响应图像

Question

你好，我想自动改变容器高度响应图像。我把容器的显示设置在flex上。图像与class = "text-block"在2div之间。Div的宽度为width: 37%和min-width: 37%。图像宽度设置为max-width:100%，所以它的响应和改变它的宽度和高度，当我改变屏幕宽度。

我想缩小容器的高度与图像的高度。容器的高度必须总是等于图像的高度。另外，我希望容器和图像的高度不超过100vh，当他们变得更大。

照片:

容器高度调整为img高度

集装箱与img高度不超过100vh

链接到问题:这是我在codependency上的代码:https://codepen.io/milkiway420/pen/xxrVgMZ

body {
height:100%;
}
.container{
display: flex;
width: 100%;
}
.text-block {
width: 37.645448%;
min-width:37.645448%;
background: #e3e3e3;     
}
img {
max-width:100%;
}

Answer 1

Alex，如果你想要一个合理的高度，请使用

object-fit: cover;

这里有一个响应性教程:

https://www.freecodecamp.org/news/css-responsive-image-tutorial/

Answer 2

如果我正确理解你的问题，你需要使用flex

body, html {
margin: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #efefef;
}
h1,h2,h3 {
margin: 0;
}
h1 {
margin-bottom: 20px;
}
* {
box-sizing: border-box;
}
/*Base Style*/
.container {
display: flex;
position: relative;
width: 100%;
height:100%;
margin: 0px auto;

.text-block {
display: flex;
flex: 1 0 30%;
background: #e3e3e3;

.text-wrapper {
margin: 0 10%;
overflow: auto;
}

}

.image-block {}
.image-container {
flex: 1 1 50%;
}       
img {
max-width:100%;
max-height: 100vh;          
}

}