Responsive Image placeholder

HTML & CSS
1

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

2

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:

3

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

4

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

5

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?

6

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>
7

Yes Paul

This is what i needed.

works perfect

Thanks
Vineet

8

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