JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="lstpstad">
 <div class="rlpls">
    <div class="rldt">
      <div class="imgs_w"><img src="https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xpa1/t1.0-9/1239905_694621183899523_202248837_n.jpg"/></div>
      <div class="rlblg">
         <div class="rlchck">Satılık/Villa</div>
         <div class="rlyr">Adana/Çukurova</div>
         <div class="rlfyt">300.000 TL</div>
      </div>
    </div>
    <div class="rlert">145 kişsffi</div>
    <div class="rklmrsm">--</div>
    <div class="tntmyp">
       <div class="rltnyp"> <a href="#" class="rltnypbtn">Tanıtısmsını Yapp</a> </div>
    </div>
  </div>

</div>

CSS

.lstpstad {
	float:left;
	width:508px;
	height:213px;
	overflow:scroll;
	}
.rlpls {
  float:left;
  width:508px;
  height:80px;
  border-bottom:1px solid #d8dbdf;
}
.rldt {
 float:left;
  width:191px;
  height:80px;
  border-right:1px solid #e7e7e7;
}
.lstpstad .rlpls:nth-child(even) { /*(even) or (2n+0)*/
	background: #d8dbe0;
}
.lstpstad .rlpls:nth-child(odd) { /*(odd) or (2n+1)*/
	background: #f4f4f4;
}
.rlert{
	float:left;
	width:85px;
	height:80px;
	line-height:80px;
	font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	color:#333333;
	border-right:1px solid #e7e7e7;
	}
.rklmrsm {
	float:left;
	width:85px;
	height:80px;
	line-height:80px;
	font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	color:#333333;
	border-right:1px solid #e7e7e7;
	}
.tntmyp {
	float:left;
	width:144px;
	height:80px;
	}
.imgs_w {
	float:left;
	width:70px;
	height:70px;
	margin-left:2px;
	margin-top:5px;
	overflow: hidden;
	
	}
.imgs_w img {
   width: 100%;
}
.imgs_w img.height {
   width: auto;
   height:100%;
}

.rlblg {
	float:left;
	width:115px;
	height:70px;
	margin-top:5px;
	margin-left:3px;
	}
.rlchck {
	float:left;
	width:115px;
	height:23px;
	font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size:12px;
	color:#647aac;
	line-height:23px;
	}
.rlyr {
	float:left;
	width:115px;
	height:23px;
	font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size:12px;
	color:#000;
	line-height:23px;
	}
.rlfyt {
	float:left;
	width:115px;
	height:23px;
	font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#000;
	line-height:23px;
	}
.rltnyp {
	float:left;
	width:124px;
	height:25px;
	background-color:red;
	margin-top:24.5px;
	margin-left:12px;
	}
.rltnypbtn {
    width: 124px;
    height: 25px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
   ...

JavaScript

$(document).ready(function () {
  
$('.imgs_w img').load(function() {
    var image = $(this),
        height = image.height(),
        width = image.width();

    if (width > height) {
        image.addClass('height');
        var middle = 0 - (image.width() - image.closest('.imgs_w').width()) / 2;
        image.css('margin-left', middle + 'px');
    } else {
        var middle = 0 - (image.height() - image.closest('.imgs_w').height()) / 2;
        image.css('margin-top', middle + 'px');
    }
}); 
 
});