首先，如果大部分代码都搞砸了，我深表歉意。我一直在尝试解决这个问题，并做了一些调整，但并不真正知道自己在做什么。
我对 html 和 CSS 完全陌生。我正在尝试制作标题，一切看起来都很好，直到我尝试减小窗口大小。
我想要标题两侧各有两张图片。我在主容器 (.banner) div 中创建了一个 div，并将两个单独的图像也放入其中。
一旦我减小宽度，整个东西就开始被压扁，照片的宽度就会变松，直到扭曲(它们似乎保持高度)，主标题文本和下面的文本开始垂直堆叠，所以“网页”在“我的第一个”等下方拍摄，右侧图像在所有内容下方和左侧拍摄。
当浏览器窗口尺寸减小时，如何使所有内容保持其纵横比？我不希望它们对于任何大小的窗口都是固定大小的，我希望它们随着窗口的大小而减小，同时保持它们的位置和纵横比。
我希望这是有道理的。
谢谢。
body {
margin: 0;
background-color: black;
}
.banner {
}
.banner-photo1 {
height: 250px;
width: 10%;
display: inline-block;
border-radius: 50%;
margin-top: 6%;
margin-left: 2%;
min-width: 10%;
}
.banner-photo2 {
height: 250px;
width: 10%;
display: inline-block;
border-radius: 50%;
margin-top: 6%;
margin-right: 2%;
min-width: 10%;
}
.banner-title {
height: 50%;
width: 75%;
color: #9649CB;
display: inline-block;
background-color: black;
margin-right: 0;
}
.banner h1 {
font-size: 150px;
padding: 0;
margin-top: 0;
text-align: center;
margin-bottom: 0;
}
.banner-title h2 {
font-size: 60px;
text-align: center;
margin-top: 0;
margin-bottom: 20px;
}
.banner-title p {
text-align: center;
margin-top: 0;
font-size: 40px
}<!DOCTYPE html>
<html>
<head>
<title>Sample Website</title>
</head>
<body>
<div class="banner">
<img class="banner-photo1"
src="https://www.startuptalks.in/wp-content/uploads/2016/04/HTML.jpg">
<div class="banner-title">
<h1>My First Webpage</h1>
<h2>Made With HTML & CSS</h2>
<p>This Is A Sample Header</p>
</div>
<img class="banner-photo2"
src="http://icons.iconarchive.com/icons/graphics-
vibe/developer/256/css-icon.png">
</div>
</body>
</html>最佳答案
这是因为当您对某个元素使用 % 时，您实际上是在设置该元素以覆盖其所在容器的一定百分比。
因此，要解决此问题，您可以使用 min-width: number px;
如果您学习 Bootstrap，那对您自己是有好处的，因为根据我的经验，它可以节省时间 https://www.w3schools.com/bootstrap/
关于html - HTML/CSS 新手无法在标题中获取 Div 以保持原位并在调整窗口大小时保持宽高比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47861227/