Html 为具有百分比宽度的图像保留纵横比&；在保持纵横比的同时调整其他div的大小

我正试图找出一种方法，使图像div具有不同的浏览器大小，并保持3:2的纵横比（用于移动响应等）。我希望能够重新调整浏览器窗口的大小，使图像始终保持3:2，因此我希望图像高度也重新调整大小

用我目前的代码有没有办法做到这一点？我还希望能够使蓝色文本div变小，而不必使上面的图像变大，因为如果我减少蓝色div的高度百分比，我将不得不增加上面的图片div，以弥补100%父元素的高度，但这将抛出图片div的纵横比

我不知道如何做到这一点，因为它比我想象的更令人困惑

谢谢你的帮助，谢谢

#bg{
宽度：100%；
高度：300px；
背景：黄色；
}
#窗口容器{
宽度：30%；
高度：200px；
背景：橙色；
}
#img{
背景：url（'http://www.livescience.com/images/i/000/036/988/original/elephants.jpg');
身高：67%；
宽度：100%；
背景尺寸：封面；
背景位置：中心；
}
#文本换行{
背景：浅蓝色；
宽度：100%；
身高：33%；
}

此处文本

这就是你想要的吗

#bg{
宽度：100%；
背景：黄色；
显示：表格；
}
#窗口容器{
宽度：30%；
背景：橙色；
显示：块；
}
img{
宽度：100%；
高度：自动；
}
#文本换行{
背景：浅蓝色；
填充：10px；
}

此处文本

这就是你想要的吗

#bg{
宽度：100%；
背景：黄色；
显示：表格；
}
#窗口容器{
宽度：30%；
背景：橙色；
显示：块；
}
img{
宽度：100%；
高度：自动；
}
#文本换行{
背景：浅蓝色；
填充：10px；
}

此处文本

您可以使用

img

元素和Flexbox：

#bg{
背景：黄色；
}
#窗口容器{
display:inline flex；/*仅采用内容宽度*/
弯曲方向：列；/*垂直堆叠子项*/
背景：橙色；
}
#文本换行{
背景：浅蓝色；
}
img{
显示：块；/*删除底部边距/空白*/
/*高度：66.66%；更准确地说，需要注释掉才能在Chrome中工作，在FF中它工作得非常完美，因此解决方案是使用适当裁剪（3:2比例）的本地存储图像，幸运的是，当前图像并非如此*/
最大宽度：100%；/*水平响应*/
最大高度：100vh；/*垂直响应*/
}

此处文本

您可以使用

img

元素和Flexbox：

#bg{
背景：黄色；
}
#窗口容器{
display:inline flex；/*仅采用内容宽度*/
弯曲方向：列；/*垂直堆叠子项*/
背景：橙色；
}
#文本换行{
背景：浅蓝色；
}
img{
显示：块；/*删除底部边距/空白*/
/*高度：66.66%；更准确地说，需要注释掉才能在Chrome中工作，在FF中它工作得非常完美，因此解决方案是使用适当裁剪（3:2比例）的本地存储图像，幸运的是，当前图像并非如此*/
最大宽度：100%；/*水平响应*/
最大高度：100vh；/*垂直响应*/
}

此处文本

你很幸运

%

-填充

和
边距
的值始终指元素的
宽度
，即使应用于
填充底部
或
填充顶部
。有了这些知识，你应该可以很容易地找到一个解决方案，确保纵横比保持不变。应用边距是否会增加图像和蓝色div之间的间距，并且填充只会向下推文本，但蓝色div将保持相同的大小？使用其他宽度和高度值可以有多大的灵活性？只要保持纵横比并且蓝色div的大小可调，那么您就很幸运了
%
-填充
和
边距
的值始终指元素的
宽度
，即使应用于
填充底部
或
填充顶部
。有了这些知识，你应该可以很容易地找到一个解决方案，确保纵横比保持不变。应用边距是否会增加图像和蓝色div之间的间距，并且填充只会向下推文本，但蓝色div将保持相同的大小？使用其他宽度和高度值可以有多大的灵活性？只要保持纵横比并且蓝色div可以调整大小，就可以了，谢谢！大概你可以使用填充来调整蓝色div的“高度”——或者无论如何，它似乎会响应其高度以适应更多文本而不是垂直响应。你是什么意思？调整浏览器窗口的大小也会调整图像的大小以保持其外观ratio@VXp垂直响应？从下面调整大小。看起来不错，谢谢！大概你可以使用填充来调整蓝色div的“高度”——或者无论如何，它似乎会响应其高度以适应更多文本而不是垂直响应。你是什么意思？调整浏览器窗口的大小也会调整图像的大小以保持其外观ratio@VXp垂直响应？从下面调整大小。