Responsive Image placeholder

Hi all

I want make a responsive image thumb placeholder.

If a image is not available or is smaller, then also the placeholder should maintain a square with minimum height and width of 200px and reduce proportionally on small screens

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
p{margin:0px; padding:0px;}
.product_item{height:auto; display:block;}
.product-thumb{border:1px solid #FF0000; min-width:200px; min-height:200px; display:block; background-color:#FF0000}
.product-thumb img{max-width:100%; margin:0px auto; height:auto; float:none; display:block}
</style>
</head>

<body>
    <div class="product-item">        
        <p class="product-thumb"><img src="images/phone6.jpg" alt=""></p>
        <p class="product-name">Apple iPhone</p>
    </div>
</body>
</html>

Thanks
Vineet

If the placeholder has a minimum height and width of 200px then it can’t possibly reduce any further! It will stick at the min-height and width.

I can’t quite grasp what you are after as the instructions are a little contradictory.:slight_smile:

Are the image and the placeholder different things?

If you want the image at 200px and to scale smaller then you would need a max-width and a max-height.

I can’t quite grasp how this should work :smile:

Hi Paul

Sorry for confusion.

Ignore my post and below is what i need.

I am creating a responsive site in which I have different sizes of images (200x200, 500x500)

So In simple language i want a square image placeholder, whether the image is available or not.

If the image is not available then height gets compressed ??

Thanks
Vineet

If you will see the below code in browser, then you will see that the background and border is applied only on the top. Other 3 sides of square are not seen because the image is not available.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
p{margin:0px; padding:0px;}
.product_item{height:auto; display:block;}
.product-thumb{border:1px solid #FF0000; max-width:500px; max-height:500px; display:block; background-color:#FF0000; border:1px solid #0000FF}
.product-thumb img{max-width:100%; margin:0px auto; height:auto; float:none; display:block}
</style>
</head>
<body>
    <div class="product-item">        
        <p class="product-thumb"></p>
        <p class="product-name">Apple iPhone</p>
    </div>
</body>
</html>

I want to display a full square with all 4 side borders even if image is not available

Thanks
Vineet

You can set a min-height:200px;min-width:200px; on the thumnail so it will always be at least that. If that’s what you mean?

Did you mean something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
p {
	margin:0px;
	padding:0px;
}
.product_item {
	height:auto;
	display:block;
}
.product-thumb {
	border:1px solid #FF0000;
	width:500px;
	height:500px;
	display:block;
	background-color:#FF0000;
	border:1px solid #0000FF;
	position:relative;
}
@media screen and (max-width:500px){
	.product-thumb {width:auto;padding-top:100%;height:auto}		
}
.product-thumb img {
	max-width:100%;
	margin:0px auto;
	height:auto;
	float:none;
	display:block;
	position:absolute;
	left:0;
	top:0;
}
</style>
</head>
<body>
<div class="product-item">
		<p class="product-thumb"></p>
		<p class="product-name">Apple iPhone</p>
</div>
</body>
</html>

Yes Paul

This is what i needed.

works perfect

Thanks
Vineet

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