How to make responsive 3 image which has different scale? - html

Question

I'm working in Wordpress and i need to insert 3 image in a row.
I'm using default editor because of my client ask that.
Insert the 3 image html for the page and then give this a little CSS with simple CSS plugin :
It's okay, the 3 image appear in a row, which has 170px height, but when i open this in mobile or tablet the scale isn't responsive.
I try to make container which has 170px height, and put the image them but wasn't working. I try to make #media query but that wasn't work.
Anyone can help me ?
I want if these 3 picture is got ca. 170px and being responsive.
* {
box-sizing: border-box;
}
.tanfolyam-kepek {
float: left;
width: 33.33%;
padding: 10px;
height: 170px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<div class="clearfix">
<div class="box">
<img class="tanfolyam-kepek" src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc1-226x300.jpg" alt=""/>
</div>
<div class="box">
<img class="tanfolyam-kepek" src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc2-300x300.jpg" alt=""/>
</div>
<div class="box">
<img class="tanfolyam-kepek"src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc3-300x243.jpg" alt=""/>
</div>
</div>

Answer 1

Responsive images on a row. Verttical and horizontal alignment. No use of clearfix. Cross browser.
<div class="box-container">
<div class="box">
<a href="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc1.jpg">
<img class="tanfolyam-kepek" src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc1-226x300.jpg" alt=""/>
</a>
</div>
<div class="box">
<a href="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc2.jpg">
<img class="tanfolyam-kepek" src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc2-300x300.jpg" alt=""/>
</a>
</div>
<div class="box">
<a href="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc3.jpg">
<img class="tanfolyam-kepek"src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc3-300x243.jpg" alt=""/>
</a>
</div>
</div>
with css
* {
box-sizing: border-box;
}
.box-container {
height: 170px; /* height you asked for */
outline: thin dotted grey; /* this outline for test only */
}
#media (max-width: 575.9px) {
.box-container {
height: ...px; /* for mobile, for example 140px */
}
}
.box {
float: left;
width: 33.333%;
height: 100%;
text-align: center; /* horizontal alignment */
}
.box a {
display: block;
/* 5 lines below for vertical alignment */
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.box img {
max-width: 100%;
height: auto; /* responsive image */
max-height: 170px; /* no overflow */
border: 10px solid #fff; /* border used as padding */
}

Answer 2

you can use bootstrap grid to make your images responsive. all you have to do is
<div class="row">
<div class="col-sm-4 col-xs-4>
//your image here
</div>
<div class="col-sm-4 col-xs-4>
//your image here
</div>
<div class="col-sm-4 col-xs-4>
//your image here
</div>
</div>
And avoid using px to specify the size since it is not responsive. Use vh and vw which stand for viewport height and viewport width respectively

Answer 3

.box{
display: inline-block;
width: 31.3%;
height: 200px;
text-align: center;
border: 1px solid #ddd;
padding: 20px 0;
margin: 10px;
}
.box img{
vertical-align: middle;
display: inline-block;
height: 100%;
max-width: none;
width: auto;
}

Answer 4

You can have something like this for have always tree picters in a row.
* {
box-sizing: border-box;
}
.tanfolyam-kepek {
float: left;
width: 33.33%;
padding: 10px;
height: 170px;
object-fit: cover;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<div class="clearfix">
<div class="box">
<img class="tanfolyam-kepek" src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc1-226x300.jpg" alt=""/>
</div>
<div class="box">
<img class="tanfolyam-kepek" src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc2-300x300.jpg" alt=""/>
</div>
<div class="box">
<img class="tanfolyam-kepek"src="https://ezoakademia.hu/wp-content/uploads/2018/12/rozsakvarc3-300x243.jpg" alt=""/>
</div>
</div>