So this is a weird one.
I'm working on a Wordpress theme, and the theme is supposed to be fully responsive. I created a "gallery" of sorts that consists of multiple rows of 3 thumbnails that when clicked open in a lightbox. I found a snippet of code online for creating responsive "square" elements; elements whose height adjusts to match their responsive width using only CSS. This involves setting a width in percentage (say 50%), and then setting height:0px; and padding-bottom:50%;. I went ahead and placed every image in a responsive container that resize like this, and then I set the images max width and max height so they wouldn't overflow their responsive square container.
This displays as expected in all browsers save for ie7. In ie7, the image seems to disappear. I've attached a fiddle (not my exact code, but still causes the issue). http://jsfiddle.net/pwGYc/
Here's the actual code:
HTML:
<a href="<? echo $photo["url"]; ?>" class="photo" title="<? echo $photo["title"]; ?>">
<img src="<? echo $photo["url"]; ?>" alt="<? echo $photo["alt"]; ?>" title="<? echo $photo["title"]; ?>" />
</a>
CSS:
.photo{
float:left;
margin:10px;
width:30%;
height:0px;
overflow:hidden;
padding:5px 0px 30% 0px !important;
box-sizing:border-box;
position:relative;
}
.photo img{
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
max-height:97%;
max-width:97%;
}
