Center and crop thumbnails with CSS ครอปรูปภาพด้วย css

CSS

.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}

ตัวอย่างการใช้งาน

<div class="thumbnail">
  <img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
  <img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>

Credit : http://jonathannicol.com/blog/2014/06/16/centre-crop-thumbnails-with-css/

CSS ข้อความซ้อนบนรูปภาพ

<style type="text/css">
.holder_wrap{
	position:relative;
	margin:auto;
	display:block;
	height:120px; /* กำหนดความสูงส่วนพื้นที่คลุมเนื้อหาทั้งหมด */
}
.holder_wrap_img{
	position:absolute;/* กำหนดการจัดตำแหน่งส่วนพื้นที่คลุมเนื้อหารุปและข้อความซ้อนทับ */
}
.holder_wrap_img img{
	position:relative; /* กำหนดการจัดตำแหน่งของรูป */
}

/* css ซ้อนทับ ชิดขอบบน */
.inner_position_top{
	position:absolute;
	display:block;	
	background-color:#CC99FF;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	top:0px; /* css กำหนดชิดด้านบน  */
	z-index:999;
}

/* css ซ้อนทับ ชิดขอบด้านซ้าย */
.inner_position_left{
	position:absolute;
	display:block;	
	background-color:#99FFCC;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	left:0px; /* css กำหนดชิดซ้าย  */
	z-index:999;
}

/* css ซ้อนทับ ชิดขอบล่าง */
.inner_position_bottom{
	position:absolute;
	display:block;	
	background-color:#FFCCCC;	
	height:50px; /* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ */
	width:100%; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	bottom:0px; /* css กำหนดชิดด้านล่าง  */
	z-index:999;	
}

/* css ซ้อนทับ ชิดขอบด้านขวา */
.inner_position_right{
	position:absolute;
	display:block;	
	background-color:#FFFF99;	
	height:100%;/* กำหนดความสูงส่วนของเนื้อหาที่นำมาซ้อนทับ แบบขยายเต็ม */
	width:50px; /* กำหนดความกว้างของเนื้อหาที่นำมาซ้อนทับ */
	top:0px; /* css กำหนดชิดด้านบน  */
	right:0px; /* css กำหนดชิดขวา  */
	z-index:999;
}

</style>

เอาไปใช้งาน

<div class="holder_wrap">
<div class="holder_wrap_img">
<img src="http://www.ninenik.com/userfiles/12/image/1.jpg" />
<div class="inner_position_top">
ซ้อนทับ ชิดขอบบน
</div>
</div>
</div>

Credit : www.ninenik.com/การใช้งาน_css_จัดตำแหน่ง_ซ้อนข้อความบนรูปภาพอย่างง่าย-426.html

MySQL Query Next Or Previous Record

Next Record หากต้องการดู Record ถัดไปต่อจาก id ที่ 7

SELECT * FROM table WHERE id=(SELECT MIN(id) FROM table WHERE id>7)

Previous Record หากต้องการดู Record ย้อนหลังต่อจาก id ที่ 7

SELECT * FROM table WHERE id=(SELECT MAX(id) FROM table WHERE id<7)