Height Equal Needed

HTML & CSS
1

I have this kind of situation →

1394×546 898 KB

I want that height should be equal.

I am using this css →

display: block;
    object-fit: cover;
    width: 100%;
    max-width: 600px;
    margin: auto;
    height: auto;
    max-height: 200px;

How should we make sure that heights are equal?

2

Maybe something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display:flex;
	max-width:980px;
	margin:auto;
	padding:20px;
	background:#f9f9f9;
}
.figure{flex:1 0 0;margin:10px;}
.figure img{
	object-fit: cover;
    width: 100%;
    max-width: 600px;
    margin: auto;
    height: 100%;
	max-height:200px;
}

</style>
</head>

<body>
<div class="wrap">
 
    <figure class="figure"><img class="img" src="http://www.pmob.co.uk/temp2/images/fixed-a04.jpg" alt="Sea">
      <figcaption> Caption Here </figcaption>
    </figure>


    <figure class="figure"><img class="img" src="http://www.pmob.co.uk/temp2/images/a1.jpg" alt="Car">
      <figcaption> Caption Here </figcaption>
    </figure>
 
</div>
</body>
</html>

Object-fit doesn’t work in I IE11 so you would need a fallback or just have a squashed image.

4 Likes
3

Hi there codeispoetry,

here is an example where the aspect ratio is maintained…

<!DOCTYPE HTML>
<html lang="en">
<head>

<base href="http://thoroughbredstrategies.com/wp-content/uploads/">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
h1, h2 {
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
 }
#container {
    max-width: 68.75em;
    padding: 2% 1%;
    margin: auto;
    border: 1px solid #999;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
 }
#container div {
    float: left;
    width: 33.333%;
    padding: 0 1%;
    box-sizing: border-box;
 }
#container div img {
    display: block;
    height: auto;
    margin: auto;
    border: 1px solid #666;
 }
#container div:nth-child(1) img {
    width: 97.5%; ( 600 / 441 * 688 / 960 * 100 ) */
 }
#container div:nth-child(2) img {
    width: 62.5%;    /*  ( 600 / 960 * 100 ) */
 }
#container div:nth-child(3) img {
    width: 100%;
 }
</style>

</head>
<body> 
 <h1>Images with varying heights</h1>
  <div id="container">
   <div>
    <img src="2016/12/belmont1-1.png" width="688" height="441" alt="">
     <h2>Grow the sport</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed 
       libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat.
      </p>
   </div><div>
    <img src="2017/11/marquee-call-centre.jpg" width="600" height="600" alt="">
     <h2>Reach new markets</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed 
       libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat.
      </p>
   </div><div>
    <img src="2016/12/tsslider1-1.jpg" width="960" height="600" alt="">
     <h2>Memorable experiences</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed 
       libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat.
      </p>
   </div>
  </div>

</body>
</html>

coothead

2 Likes
4

@coothead. Allthough I like your approach a lot, I quess that PaulOB’s sollution is way easier to implement and understand for someone with nearly none or none understanding of CSS

5

Hi there donboe,

Paul’s example and mine aren’t actually related. :wonky:

Each fits a completely different requirement. :winky:

If aspect ratio is not required then Paul’s solution is the one to use. :biggrin:

Otherwise…

coothead

4 Likes
6

@coothead. I know what your saying. But related to the question asked, Paul’s sollution would do the trick. Nevertheless like I said. I like your sollution a lot. For sure something to invest a bit more

7

Nice!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.