横向和纵向照片的一种 CSS 样式

【问题标题】：one css style for landscape and portrait photos横向和纵向照片的一种 CSS 样式
【发布时间】：2012-08-12 02:53:44
【问题描述】：

我正在显示以横向和纵向格式拍摄的图像。我想将它们设置为始终以 500 像素显示照片的最长边。这可能吗？

【问题讨论】：

【解决方案1】：

有人发布了我使用的答案，然后出于某种原因将其删除。它运行良好。

max-width: 500px;
max-height: 500px;

谢谢！

【讨论】：

【解决方案2】：

你可以设置 background-size:100% 100%; （这将使图像填充其父元素）然后你可以让有照片的 div 有 width:500px;

【讨论】：

【解决方案3】：

PHP

list($width, $height, $type, $attr) = getimagesize("img/test.jpg");
if($width > $height){
    $newWidth = 500;
    $newHeight = (500 / $width) * $height;
}else{
    $newHeight = 500;
    $newWidth = (500 / $height) * $width;
}

HTML

<img src="img/test.jpg" width="<?php echo $newWidth; ?>" height="<?php echo $newHeight; ?>" alt="Test" />

【讨论】：