CSS

Question

我的网页上有八张卡片和一个标题。我的布局在放大和缩小时完全中断。

你可以在这里看到：https://rimildeyjsr.github.io/st.anthony/#faculty_section

我已经尝试将卡片的高度更改为 em 单位以将其中的图像和文本保持在一起，但它仍然完全损坏。我该如何解决这个问题？

PS：我已经用bootstrap实现了网格布局

HTML:

<div class="section" id="section3">
    <div class="container-fluid">
        <h2 class="section-heading">Distinguished Faculty Members</h2>
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 card extra-left-margin">
                <img src="images/mrs_m_sinha_optimised.png" alt="faculty">
                <h4>Mrs M Sinha</h4>
                <h6>Faculty of Biology</h6>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 card">
                <img src="images/mrs_francis_optimised.png" alt="faculty">
                <h4>Mrs M Francis</h4>
                <h6>Faculty of Physics</h6>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 card">
                <img src="images/mrs_khalkho_optimised.png" alt="faculty">
                <h4>Mrs A Khalkho</h4>
                <h6>Faculty of Hindi</h6>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 card">
                <img src="images/mrs_verma_optimised.png" alt="faculty">
                <h4>Mrs P Verma</h4>
                <h6>Faculty of Hindi</h6>
            </div>

        </div>

        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 card extra-left-margin-less-top">
                <img src="images/mrs_kumar_optimised.png" alt="faculty">
                <h4>Mrs A Kumar</h4>
                <h6>Faculty of English</h6>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 card less-top-margin">
                <img src="images/mrs_kenwar_optimised.png" alt="faculty">
                <h4>Mrs A Kenwar</h4>
                <h6>Faculty of Geography <br> (Now Retired)</h6>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 card less-top-margin">
                <img src="images/mrs_srivastav_optimised.png" alt="faculty">
                <h4>Mrs Shrivastav</h4>
                <h6>Faculty of Hindi</h6>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 card less-top-margin">
                <img src="images/the_principal.jpg" alt="faculty">
                <h4>Mrs K Franklin</h4>
                <h6>Faculty of Everything <br> (Now Retired)</h6>
            </div>
        </div>
    </div>

CSS:

.card {
    background: #fff;
    border-radius: 3px;
    display: inline-block;
    height: 16em;
    margin: 3% 3% 2% 3%;
    position: relative;
    width: 13%;
    opacity: 0;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.less-top-margin {
    margin: 1% 3% 2% 3%;

}

.extra-left-margin {
    margin: 3% 3% 2% 14%;
}

.extra-left-margin-less-top {
    margin: 1% 3% 2% 14%;
}


.section-heading {
    text-align: center;
    background-color: #4f2500;
    color: white;
    font-family: "Roboto Mono",monospace;
    margin: 0 auto 20px auto;
    width: 100%;
    height: 1.5em;
    opacity: 0;
    position: relative;
    font-weight: normal;
}

.card img {
    -webkit-border-radius:50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    display: block;
    width: 70%;
    height: auto;
    margin: 8% auto 25% auto;
}

.card h4 {
    font-family: "Roboto Mono",sans-serif;
    font-size: 1.15em;
    text-align: center;
    font-weight: 500;
    margin: 0;
}

.card h6 {
    font-family: "Roboto Mono",sans-serif;
    text-align: center;
    font-size: 0.68em;
    font-weight: 500;
    font-style: italic;
    margin:4px 0 0 0;
    line-height:1.5 ;
}

Link 到存储库：https://github.com/rimildeyjsr/st.anthony

Answer 1

改变css

.card {
    background: #fff;
    border-radius: 3px;
    display: inline-block;
    /* height: 16em; */  **<---- REMOVE** 
    margin: 3% 3% 2% 3%;
    position: relative;
    width: 13%;
    opacity: 0;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    padding: 10px;  <----- ADD
}

在媒体查询部分

@media screen and (min-width: 1025px)
.card img {
    width: 75%;
    /* margin: 8% auto 20% auto; */  **<---- REMOVE** 
}
@media screen and (min-width: 920px)
.card img {
    width: 75%;
    /* margin: 8% auto 35% auto; */ **<---- REMOVE** 
}

CSS - 修复缩放卡片布局的问题

CSS - Fix issues on zooming the cards layout

html

zooming

twitter-bootstrap