Question

我有一个网格布局。我正在尝试将图像应用于左侧的框。它仅填充盒子的四分之三，底部留有空间。有什么办法可以使图像充满整个div并做出应有的响应。我最初想添加一个幻灯片播放，这是同样的问题。另外，我的另一个问题是4个较小的盒子。缩小屏幕时，文本将落在框外。希望有人对我有积极的反馈：）

I tried to extend the height of the image but obviously distorts the image

<!-- run local host
  1) cd and drag drop file
  2) type: python -m SimpleHTTPServer 8080
  3) browser type: http://localhost8080
-->

<!-- to make a comment: cmd and / -->
<!-- to shift a section cmd + ] on mac or CTRL + ] on wondows -->

   
    
      .grid { 
        display: grid;
        grid-template-columns: 6fr 2fr 2fr;
        grid-template-rows: 200px 200px 400px;
        grid-gap: 20px;
    
        grid-template-areas:
        "one two three"
        "one four five"
}
    
.grid > article {
        border: 1px solid #ccc;
        box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
    
.grid > article img {
        max-width: 100%;
}
    
.text {
        padding: 0 20px 20px;
}
    
.text > button {
        background: gray;
        border: 0;
        color: white;
        padding: 10px;
        width: 100%;
}
    
.text > h3 > {
        text-align: center;
}

    
        <!-- wrapper start -->
        <!-- header start -->
            <div class="wrapper">
                <div class="header"> 

                    <!-- nav bar -->
                    <ul class="nav-container">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#articles">Articles</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li><a href="../../login.html#contact">Login</a></li>
                    </ul>  

                    <!-- nav bar -->
                    <header id="top" class="top-image">
                        <h1 style="color: white">Code To Program</h1>
                        <p style="color: white">Web Design | SEO | Tutorials</p>
                        <a href="#" class="btn">Contact Us</a>
                    </header>

                </div>
        <!-- header finish -->
    
   
        <!-- header 2 start -->
            <div class="header-2">
                <h2 style="color: lightslategrey; font-size: 3rem; text-align: center">Our Services</h2>
            </div>
        <!-- header 2 finish -->
    
        </style>
        <div class="container">
          <main class="grid">
                     
            <article class="one" style="height: 420px">
                <img class="imgs" src="img/pdx.jpg">                
            </article>
            
            <article class="two">
                <div class="text">
                <h3>2 Web Design</h3>
                <figure>
                    <img src="img/seo.png" alt="Smiley face" height="72" width="72">
                </figure>
                </div>
            </article>
            
            <article class="three">
                <div class="text">
                <h3>3 SEO</h3>
                <p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
                <button>Read more</button>
                </div>
            </article>
    
            </br>
    
            <article class="four">
                <div class="text">
                <h3>4 Blog</h3>
                <p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
                <button>Just do it...</button>
                </div>
            </article>
    
            <article class="five">
                <div class="text">
                <h3>Tutoring</h3>
                <p>Dramatically engage seamlessly visualize quality intellectual capital.</p>
                <button>Here's why</button>
                </div>
            </article>

          </main>
        </div>
                
        <a href="#top">Back to top &raquo;</a>
        <script src="accordian.js"></script>

        <footer style="background-color: brown">
            <p>This is the footer</p>
            <p>&copy; 2019 Desmond Dallas</p>
        </footer>

Answer 1

您正在寻找object-fit。

这将解决您的问题：

.grid > article img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   display: block;
}

将图像应用于网格

1 个答案: