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.
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
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>
system
Closed
August 4, 2015, 5:20pm
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.