Image Dimensions Issue in HTML, CSS - html

Question

I have the following code:
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.container1{
display: flex;
justify-content: center;
padding: 20px;
overflow: hidden;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square{
height: 430px;
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mask{
clip: rect(0px, 460px, 220px, 0px);
position: absolute;
border: 5px solid #555;
}
.h11{
margin: auto;
text-align: left;
margin-top: 240px;
padding-left: 30px;
padding-right: 30px;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p9 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
padding-left: 30px;
padding-right: 30px;
display: block;
}
.button56 {
background-color: #3EDD84;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
margin-top: 15px;
margin-left: 30px;
margin-right: 70px;
font-size: 12px;
cursor: pointer;
font-family: 'merriweather';
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="parent-div">
<div class="child-div">
<div class="blogmaster">
<div class="column1">
<div class="row1">
<div class="container1">
<div class="square">
<img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask" style="border: 5px solid #555">
<div class="h11">“Chances Of My Uni/College Admission?”</div>
<p9>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p9>
<div>Read More</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- new start of blog -->
<div class="parent-div">
<div class="child-div">
<div class="blogmaster">
<div class="column1">
<div class="row1">
<div class="container1">
<div class="square">
<img src="https://www.isfasports.gr/image/cache/data/products/pr_3-1100x1100.jpg" class="mask" style="border: 5px solid #555">
<div class="h11">My Career Advice To You: Take These Steps...</div>
<p9>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p9>
<div>Read More</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End blogs Section -->
How would I modify the .mask class which controls the image, so that whatever device you use to view the two cards, the width of the image always fits the card?
For example, I have the above code embedded in a website, and so when I use a smaller device to view the website, the width of the image changes.
This is my output on a smaller device:
I could not show the second card but it is the exact same as this card above. See how the image's width is not fitted on the card?
However, on a large screen, this is my output:
Now, the image is fitted perfectly, and this is what I want on smaller devices too.
Is there a way to modify the .mask class so that whatever device the user is on, the image is always fitted on the box like shown in the output right above? Any suggestions?

Answer 1

How about the following. Adding width: 100%; height: auto to images should make them scale better.
#import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.container1 {
display: flex;
justify-content: center;
padding: 20px;
overflow: hidden;
}
.square:hover {
-webkit-transform: translate(20px, -10px);
-ms-transform: translate(10px, -10px);
transform: translate(10px, -10px);
-webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.square {
width: 100%;
/**/
min-height: 430px;
/**/
background: white;
border-radius: 4px;
box-shadow: 0px 5px 20px #D9DBDF;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.mask {
clip: rect(0px, 460px, 220px, 0px);
border: 5px solid #555;
width: calc(100% - (2 * 5px));
/**/
height: auto;
/**/
}
.h11 {
margin: auto;
text-align: left;
margin-top: 24px;
padding-left: 30px;
padding-right: 30px;
font-family: 'Merriweather', serif;
font-size: 24px;
}
p9 {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 18px;
padding-left: 30px;
padding-right: 30px;
display: block;
}
.button56 {
background-color: #3EDD84;
color: white;
width: 100px;
padding: 10px 18px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
margin-top: 15px;
margin-left: 30px;
margin-right: 70px;
margin-bottom: 15px;
/**/
//*or margin: 15px 70px 15px 30px;*/
font-size: 12px;
cursor: pointer;
font-family: 'merriweather';
}
<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<div class="parent-div">
<div class="child-div">
<div class="blogmaster">
<div class="column1">
<div class="row1">
<div class="container1">
<div class="square">
<img src="https://images.unsplash.com/photo-1504610926078-a1611febcad3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e1c8fe0c9197d66232511525bfd1cc82&auto=format&fit=crop&w=1100&q=80" class="mask" style="border: 5px solid #555">
<div class="h11">“Chances Of My Uni/College Admission?”</div>
<p9>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p9>
<div>Read More</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- new start of blog -->
<div class="parent-div">
<div class="child-div">
<div class="blogmaster">
<div class="column1">
<div class="row1">
<div class="container1">
<div class="square">
<img src="https://www.isfasports.gr/image/cache/data/products/pr_3-1100x1100.jpg" class="mask" style="border: 5px solid #555">
<div class="h11">My Career Advice To You: Take These Steps...</div>
<p9>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p9>
<div>Read More</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End blogs Section -->