我有一个名为 profile-picture-container 的 div，里面有一张图片。
div 具有明确的宽度和高度，border-radius 设置为 50% 以使其成为一个圆。
我将这个 div 放在 Bootstrap(3.3.7) 列中。因为它有明确的宽度和高度，例如 100px，当我调整窗口大小时， Bootstrap 跳转到更小的网格设置，profile-picture-container 溢出列。据我所知，要使一个 div 成为一个圆，它的高度和宽度需要相同。
但是我不能使用百分比，因为将宽度设置为 70% 是可以的，但是将高度设置为 70% 是完全不同的大小，因为它设置为列的高度的 70%。 有没有办法使其动态化并避免编写许多媒体查询？
.profile-picture-container {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
background-color: #222;
}
.col-sm-9 {
margin-top: 20px;
}<body>
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="profile-picture-container">
<img src="assets/face-1.jpg" class="profile-picture" alt="">
</div>
</div>
<div class="col-sm-9">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequuntur temporibus amet
ad dolor fuga tenetur veniam magni quo totam facilis blanditiis suscipit iusto debitis vero nam
necessitatibus possimus ut odit tempora aliquam ullam natus, officiis tempore dignissimos. Unde et
obcaecati magnam consectetur, velit, deleniti excepturi, error optio id est porro? Ea modi rem accusamus
debitis atque nihil quaerat ad sed labore cum, impedit blanditiis consequuntur! Quia molestias aliquid
velit iure possimus consectetur! Nostrum atque, dolores doloremque eius commodi ducimus reprehenderit
repellendus ratione! Reprehenderit unde fugit, quisquam magni ducimus culpa corrupti aut explicabo
tenetur alias quo expedita quod corporis, officiis quos!</div>
</div>
</div>
</body>最佳答案
在 img 标签中指定图片的高度和宽度。
<img src="assets/face-1.jpg" class="profile-picture" alt="" width="200" height="200">
对于 css，请在 css 之后添加此内容以获得解决方案。
.profile-picture-container{
display: block;
height: 0;
overflow: hidden;
position: relative;
z-index: 1;
padding-bottom: 100%;
}
.profile-picture-container img{
bottom: 0;
display: block;
height: 100%;
left: 0;
margin: auto;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
border-radius: 50%;
width: 100%;
}
关于html - 在 Bootstrap 列中动态调整圆 Angular div 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57657565/