如何根据图像大小在两个容器之间切换？ CCC / HTML

Question

有人可以告诉我如何在两个img容器之间切换，具体取决于图像的大小吗？

目前我有一个标准图像容器，它在标准网格中显示imgs。

CSS

.rounded-image {
width: 100%;
height: auto;
webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
}

HTML

<td align="center" bgcolor="#FFFFFF"><a href="http://*URL*/products/<?  =$cake['id']?>-1.jpg" rel="lightbox[<?=$cake['name_p']?>]"><img   src="http://*URL*/products/<?=$cake['id']?>-1.jpg" alt="<?=$cake['name']?>"   class="rounded-image" /></a></td>

*请注意，URL已在上面进行了混淆。

我有各种不同的图像尺寸贯穿整个网站 - 有些图片的宽度大于高度，反之亦然。目前，景观＆＃39;图像不会与容器成比例显示。图像看起来被压扁了。

我认为有两个容器适合肖像或风景图像是明智的。我不完全确定如何在两者之间切换......

任何帮助将不胜感激。

谢谢

EDITED