时间戳

首页 > 解决方案 > 在 Bootstrap 列中动态调整圆形 div 的大小

html - 在 Bootstrap 列中动态调整圆形 div 的大小

问题描述

我有一个名为的 divprofile-picture-container和里面的图片。div 有明确的宽度和高度，border-radius设置为 50% 以使其成为圆形。

我把这个 div 放在Bootstrap(3.3.7)col 中。由于它具有明确的宽度和高度，例如 100 像素，因此当我调整窗口大小并且引导程序跳转到较小的网格设置时，会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>

标签： htmlcss

解决方案

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%;
}

推荐阅读