Html/CSS - Image size and text content equal sizes - html

Question

I'm trying to resize the image size to the same size as the content of the text. However, when I try using solutions such as flex, the images are grayed out. Does anyone know any other way of achieving this? Or if I am doing something wrong. The Code is below, both html and Css, the website this is on is: on this page here . Any help would be much appreciated.
/* 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" >Find Out More</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" >Find Out More</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>

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" >Find Out More</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" >Find Out More</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>