如何使变换比例不溢出？

Question

我是 CSS 和 HTMl 的初学者，现在我正在练习模板，我想使用变换比例和隐藏溢出（不溢出图像边界）来制作缩放效果，如Snapshot Template), i made transform scale JSFiddle，但我没有成功地制作一个技巧并制作缩放效果，有人可以帮助我吗？

.gallery-grid img {
  -webkit-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Answer 1

您不能在 img 上应用 overflow: hidden。

您应该将它涂抹在您不希望它流出的容器上。

Answer 2

您可以使用 z-index 和 position ，因此缩放元素仍位于其他元素之下。还要从头到尾放置主题，容器上的溢出将隐藏从其自身顶部和底部溢出的内容。

为避免以这种方式处理，请将每个图像包装在一个容器中，这样溢出对每个图像都有效。

您的 HTML 和 CSS 的演示已更新 https://jsfiddle.net/c5ae48vL/

关于 z-index 和容器网格列和高度的行修改：

// modifications made
//line 140
//line 141
//line 149
//line 158
//line 176

或下面的片段

// modifications made
//line 140
//line 141
//line 149
//line 158
//line 176

// and transition turned to transform instead all

<!DOCTYPE html>
<!-- https://templated.co/snapshot -->
<html lang="en">
    <head>
        <title>Snapshot</title>
        <style>
            @import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";

* {
    margin: 0;
    padding: 0;
    font-family: "Roboto Light";
}

body {
    width: 100%;
    height: 100%;
}

/* Side Nav Bar */

aside {
    width: 5%;
    height: 100%;
    font-size: 22px;
    text-align: center;
    background: rgb(13, 18, 23);
    position: fixed;
    z-index: 4;
}

aside i {
    margin-top: 40px;
    color: rgb(134, 137, 139);
}

aside i:hover {
    color: white;
}

aside i:active {
    color: rgb(134, 137, 139);
}

.fas.fa-home {
    color: #19b5fe;
}

/* End Of Side Nav Bar */

/* Main Section */

main {
    width: 95%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

#banner-img {
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    height: 500px;
    z-index: 2;

}

.banner {
    background-image: url("https://i.ibb.co/KKpJvX3/banner.jpg");
    width: 100%;
    height: 500px;
    position: fixed;
    overflow: hidden;
}

.main-fore {
    text-align: center;
    position: relative;
    color: white;
    z-index: 3;
    margin-top: 15%;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.main-fore h1 {
    font-size: 50px;
    margin-bottom: 10%;
}

.main-fore h2 {
    border: 2px solid rgb(82, 72, 63);
    border-radius: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 15%;
    margin-right: auto;
    margin-left: auto;
}

.main-fore h2:hover {
    background: rgba(72, 57, 44, .2);
    color: white;
    cursor: pointer;
    user-select: none;
}

/* End Of Main Section */

/* Gallery Section - What's New */

.gallery {
    position: absolute;
    z-index: 3;
    top: 500px;
    right: 0;
    margin-right: 0;
    width: 95%;
    text-align: center;
    height: 800px;
    background: #f1f1f1;
}

#g-head {
    margin-top: 5%;
    margin-bottom: 3%;
    color: rgb(34, 49, 63);
    font-size: 25px;
}

.gallery-grid img {
    -webkit-transition:  transform .5s ease-in-out;
    -o-transition:  transform .5s ease-in-out;
    transition: transform .5s ease-in-out;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position:relative;
    z-index:10;

}

.gallery-grid img:hover {
    -webkit-transform: scale(1.2, 1.2);
    -o-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    z-index:0;
}

.gallery-grid {
    width: 100%;
  /*  height: 100%;*/ max-width: 1000px;margin:0 auto;
    margin-left: auto;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 27% 27%;
    grid-template-areas: ". . . ." ". . . .";

}

#g-button {
    position: relative;
    bottom: 200px;
    text-decoration: none;
    outline: none;
    padding: 15px 50px;
    font-size: 22px;
    font-weight: 500;
    color: white;
    background: #19b5fe;
    transition: all .2s ease-in-out;
    border-radius: 5px;
    z-index:20;
}

#g-button:hover {
    color: white;
    background: rgb(1, 155, 227);
}

/* End Of What's New Section */

/* About Me Section */

.aboutme {
    width: 47.5%;
    position: absolute;
    top: 1300px;
    z-index: 3;
    background: #e6e6e6;
    right: 47%;
    color: rgb(34,49,63);
    height: 70%;
}

.aboutme h1 {
    font-size: 20px;
    margin-top: 7%;
    margin-left: 10%;
}

.aboutme p {
    margin-left: 10%;
    margin-top: 4%;
    margin-right: 7%;
    line-height: 25px;
    font-size: 13px;
}

.socialicons i {
    position: relative;
    left: 10%;
    top: 20px;
    font-size: 25px;
    user-select: none;
    color: #19b5fe;
    margin: 3px;
}

.socialicons i:hover {
    color: rgb(1, 155, 227);
}

/* End Of About Me Section */

/* Message Section */

.message {
    width: 47.5%;
    position: absolute;
    top: 1300px;
    background: #ececec;
    right: 0;
    z-index: 3;
    height: 70%;
}

.message h1 {
    font-size: 20px;
    color: rgb(34,49,63);
    margin-top: 7%;
    margin-left: 10%;
}

.name_email {
    display: flex;
    margin-top: 5%;
    font-size: 16px;
}

.name_field {
    flex: 0 0 50%;
    margin-left: 10%;
}

.email_field {
    flex: 1;
}

.message_field {
    margin-left: 10%;
    margin-top: 5%;
}

.email_field input, .name_field input, .message_field textarea {
    padding: 10px;
    width: 75%;
    border: 1px solid #bde6fc;
}

#submit_button {
    margin-left: 10%;
    margin-top: 10%;
    background: #19b5fe;
    color: white;
    padding: 2% 7%;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
}

#submit_button:hover {
    background: rgb(1, 155, 227);
}

/* End Of Message Section */

/* Footer Section */

#footer-cap  {
    font-size: 13px;
    text-align: center;
    position: relative;
    top: 30%;
    color: black;
}

.no1-img {
    overflow: hidden;
}
        </style>
    </head>
    <body>
        <aside>
            <a href="Snapshot.html"><i class="fas fa-home"></i></a><br>
            <a href="gallery.html"><i class="fas fa-camera-retro"></i></a><br>
            <a href="generic.html"><i class="fas fa-file-alt"></i></a>
        </aside>
        <main>
            <div class="banner">
                <div id="banner-img"></div>
            </div>
            <div class="main-fore">
                <h1>Hey, I'm Snapshot</h1>
                <h2>Continue</h2>    
            </div>
        </main>
        <div class="gallery">
            <h1 id="g-head">What's New</h1>
            <div class="gallery-grid">
                <img src="https://i.ibb.co/G9CYqz6/01.jpg">
                <img src="https://i.ibb.co/pbjtTMD/05.jpg">
                <img src="https://i.ibb.co/ckv3dPy/09.jpg">
                <img src="https://i.ibb.co/p0kYsQR/02.jpg">
                <img src="https://i.ibb.co/7pgbSk9/06.jpg">
                <img src="https://i.ibb.co/0F93gYK/10.jpg">
                <img src="https://i.ibb.co/0Yw8zwd/03.jpg">
                <img src="https://i.ibb.co/wwnzstm/07.jpg">
            </div>
            <a id="g-button" href="gallery.html">Full Gallery</a>
        </div>
        <div class="middlediv">
            <div class="aboutme">
                <h1>About Me</h1>
                <p>Mus sed interdum nunc dictum rutrum scelerisque erat a parturient condimentum potenti dapibus vestibulum condimentum per tristique porta. Torquent a ut consectetur a vel ullamcorper a commodo a mattis ipsum class quam sed eros vestibulum quisque a eu nulla scelerisque a elementum vestibulum.<br><br><br>Aliquet dolor ultricies sem rhoncus dolor ullamcorper pharetra dis condimentum ullamcorper rutrum vehicula id nisi vel aptent orci litora hendrerit penatibus erat ad sit. In a semper velit eleifend a viverra adipiscing a phasellus urna praesent parturient integer ultrices montes parturient suscipit posuere quis aenean. Parturient euismod ultricies commodo arcu elementum suspendisse id dictumst at ut vestibulum conubia quisque a himenaeos dictum proin dis purus integer mollis parturient eros scelerisque dis libero parturient magnis.</p>
                <h1>Follow Me</h1>
                <div class="socialicons">
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <!-- Message Section -->
            <div class="message">
                <h1>Get in Touch</h1>
                <form action="#" method="POST" id="message_form">
                    <div class="name_email">
                        <div class="name_field">
                            <label for="name">Name</label><br><br>
                            <input type="text" placeholder="Name" id="name" name="user_name" required>
                        </div>
                        <div class="email_field">
                            <label for="email">Email</label><br><br>
                            <input type="email" id="email" placeholder="Email" name="user_email" required>
                        </div>
                    </div>
                    <div class="message_field">
                        <label for="message_area">Message</label><br><br>
                        <textarea cols="20" rows="7" id="message_area" placeholder="Message" name="user_message" required></textarea>
                    </div>
                    <input id="submit_button" type="submit" value="Send" form="message_form">
                </form>
            </div>
        </div>
        <!-- End Of Message Section -->
        <footer>
            <div style="width:95%; height: 100px; position: relative; z-index: 3; background: rgb(242, 242, 242); top: 1900px; right: 0; left: 5%;" class="footer">
                <p id="footer-cap">© Snapshot: HASHEM. Images: Unsplash.</p>
            </div>
        </footer>
    </body>
</html>

Answer 3

将每个图像包装到一个容器中 div 并为其提供 overflow: hidden

<div class="image-container">
    <img src="https://i.ibb.co/G9CYqz6/01.jpg">
</div>
<div class="image-container">
    <img src="https://i.ibb.co/pbjtTMD/05.jpg">
</div>
<div class="image-container">
    <img src="https://i.ibb.co/ckv3dPy/09.jpg">
</div>
<div class="image-container">
    <img src="https://i.ibb.co/p0kYsQR/02.jpg">
</div>
...

和

.image-container {
    overflow: hidden
}

如何使变换比例不溢出？

How to make transform scale do not overflow?

css

transform

overflow