使用CSS网格时如何调整图像的大小以使其完全适合它们的容器？

问题描述 投票：0回答：2

我是编程新手，并且在调整图像大小方面苦苦挣扎了几个星期。从我的计算机添加图像时，除非我设置最大宽度，否则它们都会溢出容器。设置最大宽度后，每个图像下方都有很多不需要的空白。

使图像完全适合其容器并使其具有响应能力的最佳方法是什么？我不确定我设置的所有width和height属性都是必需的。

    html {
        height: 100%;
    }

    body {
        height: 100%;   
    }

    .main {
        height: 100%;
    }

    .main__content {
        display: grid;
        grid-template-columns: repeat(5, 20%);
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "mc1 mc1 mc1 mc2 mc2"
                             "mc1 mc1 mc1 mc2 mc2"
                             "mc3 mc3 mc4 mc4 mc4"
                             "mc3 mc3 mc4 mc4 mc4"
                             "mc3 mc3 mc5 mc5 mc5"
                             "mc3 mc3 mc5 mc5 mc5"
                             "mc3 mc3 mc5 mc5 mc5";
        height: 100%;
    }

    .main__content div {
        border: 1px solid rgb(0, 0, 0);
    }

    .main__image-container {
        width: 100%;
    }

    .main__image-container img {
        width: 100%;
    }

    #main__content__cell-1 {
        grid-area: mc1;
    }

    #main__content__cell-2 {
        grid-area: mc2;
    }

    #main__content__cell-3 {
        grid-area: mc3;
    }

    #main__content__cell-4 {
        grid-area: mc4;
    }

    #main__content__cell-5 {
        grid-area: mc5;
    }
    <body>
        <main class="main">
            <section class="main__content">
                <div class="main__image-container" id="main__content__cell-1">
                    <img src="images/teepees.JPG" alt="coyotee buttes teepees">
                </div>
                <div class="main__image-container" id="main__content__cell-2">
                    <img src="images/great_gallery.jpg" alt="great gallery">
                </div>
                <div class="main__image-container" id="main__content__cell-3">
                    <img src="images/lake_powell.JPG" alt="lake powell">
                </div>
                <div class="main__image-container" id="main__content__cell-4">
                    <img src="images/coyotee_gulch_campsite.jpg" alt="campsite">
                </div>
                <div class="main__image-container" id="main__content__cell-5">
                    <img src="images/second_wave.JPG" alt="second wave">
                </div>
            </section>
        </main>    
    </body>    
 Thanks for helping me get over this hurdle :)








    html {
        height: 100%;
    }

    body {
        height: 100%;   
    }

    .main {
        height: 100%;
    }

    .main__content {
        display: grid;
        grid-template-columns: repeat(5, 20%);
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "mc1 mc1 mc1 mc2 mc2"
                             "mc1 mc1 mc1 mc2 mc2"
                             "mc3 mc3 mc4 mc4 mc4"
                             "mc3 mc3 mc4 mc4 mc4"
                             "mc3 mc3 mc5 mc5 mc5"
                             "mc3 mc3 mc5 mc5 mc5"
                             "mc3 mc3 mc5 mc5 mc5";
        height: 100%;
    }

    .main__content div {
        border: 1px solid rgb(0, 0, 0);
    }

    .main__image-container {
        width: 100%;
    }

    .main__image-container img {
        width: 100%;
    }

    #main__content__cell-1 {
        grid-area: mc1;
    }

    #main__content__cell-2 {
        grid-area: mc2;
    }

    #main__content__cell-3 {
        grid-area: mc3;
    }

    #main__content__cell-4 {
        grid-area: mc4;
    }

    #main__content__cell-5 {
        grid-area: mc5;
    }


    <body>
        <main class="main">
            <section class="main__content">
                <div class="main__image-container" id="main__content__cell-1">
                    <img src="images/teepees.JPG" alt="coyotee buttes teepees">
                </div>
                <div class="main__image-container" id="main__content__cell-2">
                    <img src="images/great_gallery.jpg" alt="great gallery">
                </div>
                <div class="main__image-container" id="main__content__cell-3">
                    <img src="images/lake_powell.JPG" alt="lake powell">
                </div>
                <div class="main__image-container" id="main__content__cell-4">
                    <img src="images/coyotee_gulch_campsite.jpg" alt="campsite">
                </div>
                <div class="main__image-container" id="main__content__cell-5">
                    <img src="images/second_wave.JPG" alt="second wave">
                </div>
            </section>
        </main>    
    </body>
css image grid resize containers
2个回答
0
投票

将这些样式添加到图像中以使其具有响应性：

    html {
        height: 100%;
    }

    body {
        height: 100%;   
    }

    .main {
        height: 100%;
    }

    .main__content {
        display: grid;
        grid-template-columns: repeat(5, 20%);
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: "mc1 mc1 mc1 mc2 mc2"
                             "mc1 mc1 mc1 mc2 mc2"
                             "mc3 mc3 mc4 mc4 mc4"
                             "mc3 mc3 mc4 mc4 mc4"
                             "mc3 mc3 mc5 mc5 mc5"
                             "mc3 mc3 mc5 mc5 mc5"
                             "mc3 mc3 mc5 mc5 mc5";
        height: 100%;
    }

    .main__content div {
        border: 1px solid rgb(0, 0, 0);
    }

    .main__image-container {
        width: 100%;
    }

    .main__image-container img {
        width: 100%;
    }

    #main__content__cell-1 {
        grid-area: mc1;
    }

    #main__content__cell-2 {
        grid-area: mc2;
    }

    #main__content__cell-3 {
        grid-area: mc3;
    }

    #main__content__cell-4 {
        grid-area: mc4;
    }

    #main__content__cell-5 {
        grid-area: mc5;
    }
0
投票

为了完美处理图像，请在下面添加样式：

    <body>
        <main class="main">
            <section class="main__content">
                <div class="main__image-container" id="main__content__cell-1">
                    <img src="images/teepees.JPG" alt="coyotee buttes teepees">
                </div>
                <div class="main__image-container" id="main__content__cell-2">
                    <img src="images/great_gallery.jpg" alt="great gallery">
                </div>
                <div class="main__image-container" id="main__content__cell-3">
                    <img src="images/lake_powell.JPG" alt="lake powell">
                </div>
                <div class="main__image-container" id="main__content__cell-4">
                    <img src="images/coyotee_gulch_campsite.jpg" alt="campsite">
                </div>
                <div class="main__image-container" id="main__content__cell-5">
                    <img src="images/second_wave.JPG" alt="second wave">
                </div>
            </section>
        </main>    
    </body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.