html - Html/CSS - 图像大小和文本内容大小相等

Question

我正在尝试将图像大小调整为与文本内容相同的大小。但是，当我尝试使用 flex 等解决方案时，图像会变灰。有谁知道实现这一目标的任何其他方式？或者如果我做错了什么。代码如下，包括 html 和 Css，该网站所在的网站是：在此页面上。任何帮助将非常感激。

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 0px;
    overflow: auto;  
    height: 300px; /* Should be removed. Only for demonstration */
}




/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    background-color: black;
}
.row{
    padding: 0.5% 1%;
    
}


.textcont{
    background-color: black;
    padding: 1.5%;
    width: 100%;
    overflow: auto;  
    height: 300px;
    position: relative;
    /*overflow: hidden;*/
    

 

}
.textcont  > h1 {
    margin: 0;
    color: white;
    text-shadow: 0 1px 0 white;
}



.imgcont{
    background: 
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 5)
        ),
        url('https://jackdaly.github.io/images/drawing (6).jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}


.buttonproj {
    background-color: transparent;
    color: white;
    align-content: center;
    padding: 1%;
    border: 3px solid white;

}

.buttonproj:hover {
    background-color: #555555;

    color: white;
}

                        <h2 class="w3-center" style="padding-bottom: 2%">Portfolio</h2>
                        <div class="row">
                            <!-- ##### -->
                            <div class="column" style="background-color:#aaa;">
                                <div class="imgcont" style="background-image:linear-gradient(
                                                            to right,
                                                            rgba(0, 0, 0, 0),
                                                            rgba(0, 0, 0, 5)
                                                            ), url('./images/fishtankcover.png')"></div>
                            </div>
                            <div class="column" style="">
                                <div class="textcont" style="" align="right">
                                    <h1>Smart Tank </h1>
                                    <p style="color: aliceblue">It can be a daunting experience for people buying, setting up and maintaining (or even thinking about) a fish tank and if they have the time needed for this hobby to keep their new friends alive. The AAS, short for Automatic Aquarium System (known as Smart Tank now), is a work in progress project that aims to be the step ladder for new users to climb with ease over the learning wall. The Smart Tank takes care of everything needed to take care of a fully planted aquarium.</p>
                                    <div align="right" padding="1% 10%">
                                        <button class="buttonproj"  ><a href="Coming_Soon.html" style="text-decoration:none; ">Find Out More</a></button>
                                    </div>
                                </div>
                            </div>
                            <!-- ##### -->
                            <div class="column" style="">
                                <div class="textcont" style="" align="left">
                                    <h1>CNC Dust Shoe </h1>
                                    <p style="color: aliceblue">CNC Dust shoes are incredibly important when milling any material, especially materials that can be toxic or bad for the user's health. With this project, I aimed to combine functionality with aesthetics to create a highly functional product that looks aesthetically pleasing. The project was designed in Fusion 360 and showcases how highly functional tools can also take on pleasing form. The shoe can be moved up and down, adjusted with ease and the hoover extension can be removed for different additions.</p>
                                    <div align="left" padding="1% 10%">
                                        <button class="buttonproj"  ><a href="Coming_Soon.html" style="text-decoration:none; ">Find Out More</a></button>
                                    </div>
                                </div>
                            </div>
                            <div class="column" style="background-color:#aaa;">
                                <div class="imgcont" style="background-image:linear-gradient(
                                                            to left,
                                                            rgba(0, 0, 0, 0),
                                                            rgba(0, 0, 0, 1)

                                                            ), url('https://jackdaly.github.io/images/cncshoe (3).png') "></div>
                            </div>

                            <!-- ##### -->
                        </div>

标签： htmlcss

Answer 1

Is this what you are looking for? It looks like the path to the image was relative. I've put in the absolute path.

/* Create two equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 0px;
    overflow: auto;  
    height: 300px; /* Should be removed. Only for demonstration */
}




/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    background-color: black;
}
.row{
    padding: 0.5% 1%;
    
}


.textcont{
    background-color: black;
    padding: 1.5%;
    width: 100%;
    overflow: auto;  
    height: 300px;
    position: relative;
    /*overflow: hidden;*/
    

 

}
.textcont  > h1 {
    margin: 0;
    color: white;
    text-shadow: 0 1px 0 white;
}



.imgcont{
    background: 
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 5)
        ),
        url('https://jackdaly.github.io/images/drawing (6).jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}


.buttonproj {
    background-color: transparent;
    color: white;
    align-content: center;
    padding: 1%;
    border: 3px solid white;

}

.buttonproj:hover {
    background-color: #555555;

    color: white;
}

 <h2 class="w3-center" style="padding-bottom: 2%">Portfolio</h2>
    <div class="row">
        <!-- ##### -->
        <div class="column" style="background-color:#aaa;">
            <div class="imgcont" style="background-image:linear-gradient(
                                        to right,
                                        rgba(0, 0, 0, 0),
                                        rgba(0, 0, 0, 5)
                                        ), url('https://jackdaly.github.io/images/fishtankcover.png')"></div>
        </div>
        <div class="column" style="">
            <div class="textcont" style="" align="right">
                <h1>Smart Tank </h1>
                <p style="color: aliceblue">It can be a daunting experience for people buying, setting up and maintaining (or even thinking about) a fish tank and if they have the time needed for this hobby to keep their new friends alive. The AAS, short for Automatic Aquarium System (known as Smart Tank now), is a work in progress project that aims to be the step ladder for new users to climb with ease over the learning wall. The Smart Tank takes care of everything needed to take care of a fully planted aquarium.</p>
                <div align="right" padding="1% 10%">
                    <button class="buttonproj"  ><a href="Coming_Soon.html" style="text-decoration:none; ">Find Out More</a></button>
                </div>
            </div>
        </div>
        <!-- ##### -->
        <div class="column" style="">
            <div class="textcont" style="" align="left">
                <h1>CNC Dust Shoe </h1>
                <p style="color: aliceblue">CNC Dust shoes are incredibly important when milling any material, especially materials that can be toxic or bad for the user's health. With this project, I aimed to combine functionality with aesthetics to create a highly functional product that looks aesthetically pleasing. The project was designed in Fusion 360 and showcases how highly functional tools can also take on pleasing form. The shoe can be moved up and down, adjusted with ease and the hoover extension can be removed for different additions.</p>
                <div align="left" padding="1% 10%">
                    <button class="buttonproj"  ><a href="Coming_Soon.html" style="text-decoration:none; ">Find Out More</a></button>
                </div>
            </div>
        </div>
        <div class="column" style="background-color:#aaa;">
            <div class="imgcont" style="background-image:linear-gradient(
                                        to left,
                                        rgba(0, 0, 0, 0),
                                        rgba(0, 0, 0, 1)

                                        ), url('https://jackdaly.github.io/images/cncshoe (3).png') ">                </div>
    </div>

    <!-- ##### -->
</div>